import '@bitcode-framework/ui-web-components/bc-field-string, @bitcode-framework/ui-web-components/bc-field-password, @bitcode-framework/ui-web-components/bc-field-text, @bitcode-framework/ui-web-components/bc-field-smalltext';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-field-string */}
      <bc-field-string name="username" label="Username" placeholder="Enter..." required clearable={true}></bc-field-string>

      {/* bc-field-password */}
      <bc-field-password name="pw" label="Password" required min-length="8" show-reveal></bc-field-password>

      {/* bc-field-text */}
      <bc-field-text name="bio" label="Bio" rows="4" max-length="500" show-count></bc-field-text>

      {/* bc-field-smalltext */}
      <bc-field-smalltext name="note" label="Note" rows="2"></bc-field-smalltext>
    </>
  );
}

<template>
  <!-- bc-field-string -->
  <bc-field-string name="username" label="Username" placeholder="Enter..." required clearable></bc-field-string>

  <!-- bc-field-password -->
  <bc-field-password name="pw" label="Password" required min-length="8" show-reveal></bc-field-password>

  <!-- bc-field-text -->
  <bc-field-text name="bio" label="Bio" rows="4" max-length="500" show-count></bc-field-text>

  <!-- bc-field-smalltext -->
  <bc-field-smalltext name="note" label="Note" rows="2"></bc-field-smalltext>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-field-string -->
<bc-field-string name="username" label="Username" placeholder="Enter..." required clearable></bc-field-string>

<!-- bc-field-password -->
<bc-field-password name="pw" label="Password" required min-length="8" show-reveal></bc-field-password>

<!-- bc-field-text -->
<bc-field-text name="bio" label="Bio" rows="4" max-length="500" show-count></bc-field-text>

<!-- bc-field-smalltext -->
<bc-field-smalltext name="note" label="Note" rows="2"></bc-field-smalltext>

import '@bitcode-framework/ui-web-components/bc-field-integer, @bitcode-framework/ui-web-components/bc-field-float, @bitcode-framework/ui-web-components/bc-field-decimal, @bitcode-framework/ui-web-components/bc-field-currency, @bitcode-framework/ui-web-components/bc-field-percent';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-field-integer */}
      <bc-field-integer name="qty" label="Quantity" min="0" max="999" step="1"></bc-field-integer>

      {/* bc-field-float */}
      <bc-field-float name="weight" label="Weight" precision="2" suffix-text="kg"></bc-field-float>

      {/* bc-field-decimal */}
      <bc-field-decimal name="price" label="Price" precision="2" prefix-text="quot;></bc-field-decimal>

      {/* bc-field-currency */}
      <bc-field-currency name="amount" label="Amount" currency="USD"></bc-field-currency>

      {/* bc-field-percent */}
      <bc-field-percent name="discount" label="Discount" min="0" max="100"></bc-field-percent>
    </>
  );
}

<template>
  <!-- bc-field-integer -->
  <bc-field-integer name="qty" label="Quantity" min="0" max="999" step="1"></bc-field-integer>

  <!-- bc-field-float -->
  <bc-field-float name="weight" label="Weight" precision="2" suffix-text="kg"></bc-field-float>

  <!-- bc-field-decimal -->
  <bc-field-decimal name="price" label="Price" precision="2" prefix-text="quot;></bc-field-decimal>

  <!-- bc-field-currency -->
  <bc-field-currency name="amount" label="Amount" currency="USD"></bc-field-currency>

  <!-- bc-field-percent -->
  <bc-field-percent name="discount" label="Discount" min="0" max="100"></bc-field-percent>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-field-integer -->
<bc-field-integer name="qty" label="Quantity" min="0" max="999" step="1"></bc-field-integer>

<!-- bc-field-float -->
<bc-field-float name="weight" label="Weight" precision="2" suffix-text="kg"></bc-field-float>

<!-- bc-field-decimal -->
<bc-field-decimal name="price" label="Price" precision="2" prefix-text="quot;></bc-field-decimal>

<!-- bc-field-currency -->
<bc-field-currency name="amount" label="Amount" currency="USD"></bc-field-currency>

<!-- bc-field-percent -->
<bc-field-percent name="discount" label="Discount" min="0" max="100"></bc-field-percent>

import '@bitcode-framework/ui-web-components/bc-field-date, @bitcode-framework/ui-web-components/bc-field-datetime, @bitcode-framework/ui-web-components/bc-field-time';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-field-date */}
      <bc-field-date name="birthday" label="Birthday"></bc-field-date>

      {/* bc-field-datetime */}
      <bc-field-datetime name="created" label="Created At"></bc-field-datetime>

      {/* bc-field-time */}
      <bc-field-time name="start" label="Start Time"></bc-field-time>
    </>
  );
}

<template>
  <!-- bc-field-date -->
  <bc-field-date name="birthday" label="Birthday"></bc-field-date>

  <!-- bc-field-datetime -->
  <bc-field-datetime name="created" label="Created At"></bc-field-datetime>

  <!-- bc-field-time -->
  <bc-field-time name="start" label="Start Time"></bc-field-time>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-field-date -->
<bc-field-date name="birthday" label="Birthday"></bc-field-date>

<!-- bc-field-datetime -->
<bc-field-datetime name="created" label="Created At"></bc-field-datetime>

<!-- bc-field-time -->
<bc-field-time name="start" label="Start Time"></bc-field-time>

import '@bitcode-framework/ui-web-components/bc-field-select, @bitcode-framework/ui-web-components/bc-field-checkbox, @bitcode-framework/ui-web-components/bc-field-toggle, @bitcode-framework/ui-web-components/bc-field-radio, @bitcode-framework/ui-web-components/bc-field-rating, @bitcode-framework/ui-web-components/bc-field-color';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-field-select */}
      <bc-field-select name="status" label="Status" options={[{"label":"Active","value":"active"},{"label":"Inactive","value":"inactive"}]}></bc-field-select>

      {/* bc-field-checkbox */}
      <bc-field-checkbox name="colors" label="Colors" options={[{"label":"Red","value":"red"},{"label":"Blue","value":"blue"}]}></bc-field-checkbox>

      {/* bc-field-toggle */}
      <bc-field-toggle name="dark" label="Dark Mode"></bc-field-toggle>

      {/* bc-field-radio */}
      <bc-field-radio name="gender" label="Gender" options={[{"label":"Male","value":"M"},{"label":"Female","value":"F"}]}></bc-field-radio>

      {/* bc-field-rating */}
      <bc-field-rating name="stars" label="Rating" max="5"></bc-field-rating>

      {/* bc-field-color */}
      <bc-field-color name="theme" label="Theme Color" value="#4f46e5"></bc-field-color>
    </>
  );
}

<template>
  <!-- bc-field-select -->
  <bc-field-select name="status" label="Status" options='[{"label":"Active","value":"active"},{"label":"Inactive","value":"inactive"}]'></bc-field-select>

  <!-- bc-field-checkbox -->
  <bc-field-checkbox name="colors" label="Colors" options='[{"label":"Red","value":"red"},{"label":"Blue","value":"blue"}]'></bc-field-checkbox>

  <!-- bc-field-toggle -->
  <bc-field-toggle name="dark" label="Dark Mode"></bc-field-toggle>

  <!-- bc-field-radio -->
  <bc-field-radio name="gender" label="Gender" options='[{"label":"Male","value":"M"},{"label":"Female","value":"F"}]'></bc-field-radio>

  <!-- bc-field-rating -->
  <bc-field-rating name="stars" label="Rating" max="5"></bc-field-rating>

  <!-- bc-field-color -->
  <bc-field-color name="theme" label="Theme Color" value="#4f46e5"></bc-field-color>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-field-select -->
<bc-field-select name="status" label="Status" options='[{"label":"Active","value":"active"},{"label":"Inactive","value":"inactive"}]'></bc-field-select>

<!-- bc-field-checkbox -->
<bc-field-checkbox name="colors" label="Colors" options='[{"label":"Red","value":"red"},{"label":"Blue","value":"blue"}]'></bc-field-checkbox>

<!-- bc-field-toggle -->
<bc-field-toggle name="dark" label="Dark Mode"></bc-field-toggle>

<!-- bc-field-radio -->
<bc-field-radio name="gender" label="Gender" options='[{"label":"Male","value":"M"},{"label":"Female","value":"F"}]'></bc-field-radio>

<!-- bc-field-rating -->
<bc-field-rating name="stars" label="Rating" max="5"></bc-field-rating>

<!-- bc-field-color -->
<bc-field-color name="theme" label="Theme Color" value="#4f46e5"></bc-field-color>

import '@bitcode-framework/ui-web-components/bc-field-richtext, @bitcode-framework/ui-web-components/bc-field-markdown, @bitcode-framework/ui-web-components/bc-field-code, @bitcode-framework/ui-web-components/bc-field-json';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-field-richtext */}
      <bc-field-richtext name="content" label="Content"></bc-field-richtext>

      {/* bc-field-markdown */}
      <bc-field-markdown name="readme" label="README"></bc-field-markdown>

      {/* bc-field-code */}
      <bc-field-code name="script" label="Script" language="javascript"></bc-field-code>

      {/* bc-field-json */}
      <bc-field-json name="config" label="Config"></bc-field-json>
    </>
  );
}

<template>
  <!-- bc-field-richtext -->
  <bc-field-richtext name="content" label="Content"></bc-field-richtext>

  <!-- bc-field-markdown -->
  <bc-field-markdown name="readme" label="README"></bc-field-markdown>

  <!-- bc-field-code -->
  <bc-field-code name="script" label="Script" language="javascript"></bc-field-code>

  <!-- bc-field-json -->
  <bc-field-json name="config" label="Config"></bc-field-json>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-field-richtext -->
<bc-field-richtext name="content" label="Content"></bc-field-richtext>

<!-- bc-field-markdown -->
<bc-field-markdown name="readme" label="README"></bc-field-markdown>

<!-- bc-field-code -->
<bc-field-code name="script" label="Script" language="javascript"></bc-field-code>

<!-- bc-field-json -->
<bc-field-json name="config" label="Config"></bc-field-json>

import '@bitcode-framework/ui-web-components/bc-field-file, @bitcode-framework/ui-web-components/bc-field-image, @bitcode-framework/ui-web-components/bc-field-signature';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-field-file */}
      <bc-field-file name="avatar" label="Avatar" accept="image/*"></bc-field-file>

      {/* bc-field-image */}
      <bc-field-image name="photo" label="Photo"></bc-field-image>

      {/* bc-field-signature */}
      <bc-field-signature name="sig" label="Signature"></bc-field-signature>
    </>
  );
}

<template>
  <!-- bc-field-file -->
  <bc-field-file name="avatar" label="Avatar" accept="image/*"></bc-field-file>

  <!-- bc-field-image -->
  <bc-field-image name="photo" label="Photo"></bc-field-image>

  <!-- bc-field-signature -->
  <bc-field-signature name="sig" label="Signature"></bc-field-signature>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-field-file -->
<bc-field-file name="avatar" label="Avatar" accept="image/*"></bc-field-file>

<!-- bc-field-image -->
<bc-field-image name="photo" label="Photo"></bc-field-image>

<!-- bc-field-signature -->
<bc-field-signature name="sig" label="Signature"></bc-field-signature>

import '@bitcode-framework/ui-web-components/bc-field-link, @bitcode-framework/ui-web-components/bc-field-dynlink, @bitcode-framework/ui-web-components/bc-field-tableselect';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-field-link */}
      <bc-field-link name="ref" label="Reference" href="https://example.com" text="Open"></bc-field-link>

      {/* bc-field-dynlink */}
      <bc-field-dynlink name="doc" label="Document" pattern="/docs/{id}"></bc-field-dynlink>

      {/* bc-field-tableselect */}
      <bc-field-tableselect name="product" label="Product" model="product" columns={[{"field":"name","label":"Name"}]}></bc-field-tableselect>
    </>
  );
}

<template>
  <!-- bc-field-link -->
  <bc-field-link name="ref" label="Reference" href="https://example.com" text="Open"></bc-field-link>

  <!-- bc-field-dynlink -->
  <bc-field-dynlink name="doc" label="Document" pattern="/docs/{id}"></bc-field-dynlink>

  <!-- bc-field-tableselect -->
  <bc-field-tableselect name="product" label="Product" model="product" columns='[{"field":"name","label":"Name"}]'></bc-field-tableselect>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-field-link -->
<bc-field-link name="ref" label="Reference" href="https://example.com" text="Open"></bc-field-link>

<!-- bc-field-dynlink -->
<bc-field-dynlink name="doc" label="Document" pattern="/docs/{id}"></bc-field-dynlink>

<!-- bc-field-tableselect -->
<bc-field-tableselect name="product" label="Product" model="product" columns='[{"field":"name","label":"Name"}]'></bc-field-tableselect>

import '@bitcode-framework/ui-web-components/bc-chart-bar, @bitcode-framework/ui-web-components/bc-chart-line, @bitcode-framework/ui-web-components/bc-chart-area, @bitcode-framework/ui-web-components/bc-chart-pie, @bitcode-framework/ui-web-components/bc-chart-scatter, @bitcode-framework/ui-web-components/bc-chart-radar, @bitcode-framework/ui-web-components/bc-chart-gauge, @bitcode-framework/ui-web-components/bc-chart-funnel, @bitcode-framework/ui-web-components/bc-chart-heatmap, @bitcode-framework/ui-web-components/bc-chart-candlestick, @bitcode-framework/ui-web-components/bc-chart-boxplot, @bitcode-framework/ui-web-components/bc-chart-sankey, @bitcode-framework/ui-web-components/bc-chart-treemap, @bitcode-framework/ui-web-components/bc-chart-graph, @bitcode-framework/ui-web-components/bc-chart-themeriver, @bitcode-framework/ui-web-components/bc-chart-parallel';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-chart-bar */}
      <bc-chart-bar chartTitle="Sales" data={[{"name":"Q1","value":120}]}></bc-chart-bar>

      {/* bc-chart-line */}
      <bc-chart-line chartTitle="Trend" data={[{"name":"Jan","value":100}]} smooth={true}></bc-chart-line>

      {/* bc-chart-area */}
      <bc-chart-area chartTitle="Traffic" data={[{"name":"Mon","value":820}]}></bc-chart-area>

      {/* bc-chart-pie */}
      <bc-chart-pie chartTitle="Share" data={[{"name":"A","value":60}]} donut={true}></bc-chart-pie>

      {/* bc-chart-scatter */}
      <bc-chart-scatter chartTitle="Correlation" data={[[10,8],[8,7]]}></bc-chart-scatter>

      {/* bc-chart-radar */}
      <bc-chart-radar chartTitle="Skills" data={[{"name":"Speed","value":80}]}></bc-chart-radar>

      {/* bc-chart-gauge */}
      <bc-chart-gauge chartTitle="CPU" value="72" max="100"></bc-chart-gauge>

      {/* bc-chart-funnel */}
      <bc-chart-funnel chartTitle="Pipeline" data={[{"name":"Leads","value":100}]}></bc-chart-funnel>

      {/* bc-chart-heatmap */}
      <bc-chart-heatmap chartTitle="Activity" data={[[0,0,5],[0,1,8]]}></bc-chart-heatmap>

      {/* bc-chart-candlestick */}
      <bc-chart-candlestick chartTitle="Stock" data={[["2024-01",100,120,90,110]]}></bc-chart-candlestick>

      {/* bc-chart-boxplot */}
      <bc-chart-boxplot chartTitle="Dist" data={[[1,2,3,4,5]]}></bc-chart-boxplot>

      {/* bc-chart-sankey */}
      <bc-chart-sankey chartTitle="Flow" data="..."></bc-chart-sankey>

      {/* bc-chart-treemap */}
      <bc-chart-treemap chartTitle="Budget" data={[{"name":"Eng","value":50}]}></bc-chart-treemap>

      {/* bc-chart-graph */}
      <bc-chart-graph chartTitle="Network" data="..."></bc-chart-graph>

      {/* bc-chart-themeriver */}
      <bc-chart-themeriver chartTitle="Trend" data="..."></bc-chart-themeriver>

      {/* bc-chart-parallel */}
      <bc-chart-parallel chartTitle="Multi" data="..."></bc-chart-parallel>
    </>
  );
}

<template>
  <!-- bc-chart-bar -->
  <bc-chart-bar chart-title="Sales" data='[{"name":"Q1","value":120}]'></bc-chart-bar>

  <!-- bc-chart-line -->
  <bc-chart-line chart-title="Trend" data='[{"name":"Jan","value":100}]' smooth></bc-chart-line>

  <!-- bc-chart-area -->
  <bc-chart-area chart-title="Traffic" data='[{"name":"Mon","value":820}]'></bc-chart-area>

  <!-- bc-chart-pie -->
  <bc-chart-pie chart-title="Share" data='[{"name":"A","value":60}]' donut></bc-chart-pie>

  <!-- bc-chart-scatter -->
  <bc-chart-scatter chart-title="Correlation" data='[[10,8],[8,7]]'></bc-chart-scatter>

  <!-- bc-chart-radar -->
  <bc-chart-radar chart-title="Skills" data='[{"name":"Speed","value":80}]'></bc-chart-radar>

  <!-- bc-chart-gauge -->
  <bc-chart-gauge chart-title="CPU" value="72" max="100"></bc-chart-gauge>

  <!-- bc-chart-funnel -->
  <bc-chart-funnel chart-title="Pipeline" data='[{"name":"Leads","value":100}]'></bc-chart-funnel>

  <!-- bc-chart-heatmap -->
  <bc-chart-heatmap chart-title="Activity" data='[[0,0,5],[0,1,8]]'></bc-chart-heatmap>

  <!-- bc-chart-candlestick -->
  <bc-chart-candlestick chart-title="Stock" data='[["2024-01",100,120,90,110]]'></bc-chart-candlestick>

  <!-- bc-chart-boxplot -->
  <bc-chart-boxplot chart-title="Dist" data='[[1,2,3,4,5]]'></bc-chart-boxplot>

  <!-- bc-chart-sankey -->
  <bc-chart-sankey chart-title="Flow" data='...'></bc-chart-sankey>

  <!-- bc-chart-treemap -->
  <bc-chart-treemap chart-title="Budget" data='[{"name":"Eng","value":50}]'></bc-chart-treemap>

  <!-- bc-chart-graph -->
  <bc-chart-graph chart-title="Network" data='...'></bc-chart-graph>

  <!-- bc-chart-themeriver -->
  <bc-chart-themeriver chart-title="Trend" data='...'></bc-chart-themeriver>

  <!-- bc-chart-parallel -->
  <bc-chart-parallel chart-title="Multi" data='...'></bc-chart-parallel>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-chart-bar -->
<bc-chart-bar chart-title="Sales" data='[{"name":"Q1","value":120}]'></bc-chart-bar>

<!-- bc-chart-line -->
<bc-chart-line chart-title="Trend" data='[{"name":"Jan","value":100}]' smooth></bc-chart-line>

<!-- bc-chart-area -->
<bc-chart-area chart-title="Traffic" data='[{"name":"Mon","value":820}]'></bc-chart-area>

<!-- bc-chart-pie -->
<bc-chart-pie chart-title="Share" data='[{"name":"A","value":60}]' donut></bc-chart-pie>

<!-- bc-chart-scatter -->
<bc-chart-scatter chart-title="Correlation" data='[[10,8],[8,7]]'></bc-chart-scatter>

<!-- bc-chart-radar -->
<bc-chart-radar chart-title="Skills" data='[{"name":"Speed","value":80}]'></bc-chart-radar>

<!-- bc-chart-gauge -->
<bc-chart-gauge chart-title="CPU" value="72" max="100"></bc-chart-gauge>

<!-- bc-chart-funnel -->
<bc-chart-funnel chart-title="Pipeline" data='[{"name":"Leads","value":100}]'></bc-chart-funnel>

<!-- bc-chart-heatmap -->
<bc-chart-heatmap chart-title="Activity" data='[[0,0,5],[0,1,8]]'></bc-chart-heatmap>

<!-- bc-chart-candlestick -->
<bc-chart-candlestick chart-title="Stock" data='[["2024-01",100,120,90,110]]'></bc-chart-candlestick>

<!-- bc-chart-boxplot -->
<bc-chart-boxplot chart-title="Dist" data='[[1,2,3,4,5]]'></bc-chart-boxplot>

<!-- bc-chart-sankey -->
<bc-chart-sankey chart-title="Flow" data='...'></bc-chart-sankey>

<!-- bc-chart-treemap -->
<bc-chart-treemap chart-title="Budget" data='[{"name":"Eng","value":50}]'></bc-chart-treemap>

<!-- bc-chart-graph -->
<bc-chart-graph chart-title="Network" data='...'></bc-chart-graph>

<!-- bc-chart-themeriver -->
<bc-chart-themeriver chart-title="Trend" data='...'></bc-chart-themeriver>

<!-- bc-chart-parallel -->
<bc-chart-parallel chart-title="Multi" data='...'></bc-chart-parallel>

import '@bitcode-framework/ui-web-components/bc-datatable, @bitcode-framework/ui-web-components/bc-child-table, @bitcode-framework/ui-web-components/bc-filter-panel, @bitcode-framework/ui-web-components/bc-filter-bar, @bitcode-framework/ui-web-components/bc-filter-builder';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-datatable */}
      <bc-datatable model="contact" columns={[{"field":"name","label":"Name"},{"field":"email","label":"Email"}]}></bc-datatable>

      {/* bc-child-table */}
      <bc-child-table model="contact" fields={["name","email"]}></bc-child-table>

      {/* bc-filter-panel */}
      <bc-filter-panel fields={[{"key":"name","label":"Name","type":"string"}]}></bc-filter-panel>

      {/* bc-filter-bar */}
      <bc-filter-bar fields={[{"key":"name","label":"Name","type":"string"}]}></bc-filter-bar>

      {/* bc-filter-builder */}
      <bc-filter-builder fields={[{"key":"name","label":"Name","type":"string"}]}></bc-filter-builder>
    </>
  );
}

<template>
  <!-- bc-datatable -->
  <bc-datatable model="contact" columns='[{"field":"name","label":"Name"},{"field":"email","label":"Email"}]'></bc-datatable>

  <!-- bc-child-table -->
  <bc-child-table model="contact" fields='["name","email"]'></bc-child-table>

  <!-- bc-filter-panel -->
  <bc-filter-panel fields='[{"key":"name","label":"Name","type":"string"}]'></bc-filter-panel>

  <!-- bc-filter-bar -->
  <bc-filter-bar fields='[{"key":"name","label":"Name","type":"string"}]'></bc-filter-bar>

  <!-- bc-filter-builder -->
  <bc-filter-builder fields='[{"key":"name","label":"Name","type":"string"}]'></bc-filter-builder>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-datatable -->
<bc-datatable model="contact" columns='[{"field":"name","label":"Name"},{"field":"email","label":"Email"}]'></bc-datatable>

<!-- bc-child-table -->
<bc-child-table model="contact" fields='["name","email"]'></bc-child-table>

<!-- bc-filter-panel -->
<bc-filter-panel fields='[{"key":"name","label":"Name","type":"string"}]'></bc-filter-panel>

<!-- bc-filter-bar -->
<bc-filter-bar fields='[{"key":"name","label":"Name","type":"string"}]'></bc-filter-bar>

<!-- bc-filter-builder -->
<bc-filter-builder fields='[{"key":"name","label":"Name","type":"string"}]'></bc-filter-builder>

import '@bitcode-framework/ui-web-components/bc-dialog-modal, @bitcode-framework/ui-web-components/bc-dialog-confirm, @bitcode-framework/ui-web-components/bc-dialog-alert, @bitcode-framework/ui-web-components/bc-dialog-prompt, @bitcode-framework/ui-web-components/bc-dialog-wizard, @bitcode-framework/ui-web-components/bc-dialog-quickentry, @bitcode-framework/ui-web-components/bc-toast';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-dialog-modal */}
      <bc-dialog-modal dialogTitle="Confirm" open={true}>Content here</bc-dialog-modal>

      {/* bc-dialog-confirm */}
      <bc-dialog-confirm dialogTitle="Delete?" message="Are you sure?"></bc-dialog-confirm>

      {/* bc-dialog-alert */}
      <bc-dialog-alert dialogTitle="Info" message="Saved!"></bc-dialog-alert>

      {/* bc-dialog-prompt */}
      <bc-dialog-prompt dialogTitle="Name" message="Enter name:" value=""></bc-dialog-prompt>

      {/* bc-dialog-wizard */}
      <bc-dialog-wizard dialogTitle="Setup" steps={[{"title":"Step 1"},{"title":"Step 2"}]}></bc-dialog-wizard>

      {/* bc-dialog-quickentry */}
      <bc-dialog-quickentry dialogTitle="New" model="contact" fields={["name","email"]}></bc-dialog-quickentry>

      {/* bc-toast */}
      <bc-toast variant="success" message="Saved!"></bc-toast>
    </>
  );
}

<template>
  <!-- bc-dialog-modal -->
  <bc-dialog-modal dialog-title="Confirm" open>Content here</bc-dialog-modal>

  <!-- bc-dialog-confirm -->
  <bc-dialog-confirm dialog-title="Delete?" message="Are you sure?"></bc-dialog-confirm>

  <!-- bc-dialog-alert -->
  <bc-dialog-alert dialog-title="Info" message="Saved!"></bc-dialog-alert>

  <!-- bc-dialog-prompt -->
  <bc-dialog-prompt dialog-title="Name" message="Enter name:" value=""></bc-dialog-prompt>

  <!-- bc-dialog-wizard -->
  <bc-dialog-wizard dialog-title="Setup" steps='[{"title":"Step 1"},{"title":"Step 2"}]'></bc-dialog-wizard>

  <!-- bc-dialog-quickentry -->
  <bc-dialog-quickentry dialog-title="New" model="contact" fields='["name","email"]'></bc-dialog-quickentry>

  <!-- bc-toast -->
  <bc-toast variant="success" message="Saved!"></bc-toast>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-dialog-modal -->
<bc-dialog-modal dialog-title="Confirm" open>Content here</bc-dialog-modal>

<!-- bc-dialog-confirm -->
<bc-dialog-confirm dialog-title="Delete?" message="Are you sure?"></bc-dialog-confirm>

<!-- bc-dialog-alert -->
<bc-dialog-alert dialog-title="Info" message="Saved!"></bc-dialog-alert>

<!-- bc-dialog-prompt -->
<bc-dialog-prompt dialog-title="Name" message="Enter name:" value=""></bc-dialog-prompt>

<!-- bc-dialog-wizard -->
<bc-dialog-wizard dialog-title="Setup" steps='[{"title":"Step 1"},{"title":"Step 2"}]'></bc-dialog-wizard>

<!-- bc-dialog-quickentry -->
<bc-dialog-quickentry dialog-title="New" model="contact" fields='["name","email"]'></bc-dialog-quickentry>

<!-- bc-toast -->
<bc-toast variant="success" message="Saved!"></bc-toast>

import '@bitcode-framework/ui-web-components/bc-section, @bitcode-framework/ui-web-components/bc-tabs, @bitcode-framework/ui-web-components/bc-tab, @bitcode-framework/ui-web-components/bc-row, @bitcode-framework/ui-web-components/bc-column, @bitcode-framework/ui-web-components/bc-header, @bitcode-framework/ui-web-components/bc-sheet, @bitcode-framework/ui-web-components/bc-separator, @bitcode-framework/ui-web-components/bc-html-block, @bitcode-framework/ui-web-components/bc-button-box';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-section */}
      <bc-section title="Section Title">Content</bc-section>

      {/* bc-tabs */}
      <bc-tabs><bc-tab label="Tab 1">Content 1</bc-tab><bc-tab label="Tab 2">Content 2</bc-tab></bc-tabs>

      {/* bc-tab */}
      <bc-tab label="Tab Content">Panel content here</bc-tab>

      {/* bc-row */}
      <bc-row gap="1rem"><div>Col 1</div><div>Col 2</div></bc-row>

      {/* bc-column */}
      <bc-column width="50%">Half-width column</bc-column>

      {/* bc-header */}
      <bc-header title="Page Title" subtitle="Description"></bc-header>

      {/* bc-sheet */}
      <bc-sheet title="Card Title">Card content</bc-sheet>

      {/* bc-separator */}
      <bc-separator></bc-separator>

      {/* bc-html-block */}
      <bc-html-block content="<h2>Title</h2><p>Text</p>"></bc-html-block>

      {/* bc-button-box */}
      <bc-button-box><button>Action</button></bc-button-box>
    </>
  );
}

<template>
  <!-- bc-section -->
  <bc-section title="Section Title">Content</bc-section>

  <!-- bc-tabs -->
  <bc-tabs><bc-tab label="Tab 1">Content 1</bc-tab><bc-tab label="Tab 2">Content 2</bc-tab></bc-tabs>

  <!-- bc-tab -->
  <bc-tab label="Tab Content">Panel content here</bc-tab>

  <!-- bc-row -->
  <bc-row gap="1rem"><div>Col 1</div><div>Col 2</div></bc-row>

  <!-- bc-column -->
  <bc-column width="50%">Half-width column</bc-column>

  <!-- bc-header -->
  <bc-header title="Page Title" subtitle="Description"></bc-header>

  <!-- bc-sheet -->
  <bc-sheet title="Card Title">Card content</bc-sheet>

  <!-- bc-separator -->
  <bc-separator></bc-separator>

  <!-- bc-html-block -->
  <bc-html-block content="<h2>Title</h2><p>Text</p>"></bc-html-block>

  <!-- bc-button-box -->
  <bc-button-box><button>Action</button></bc-button-box>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-section -->
<bc-section title="Section Title">Content</bc-section>

<!-- bc-tabs -->
<bc-tabs><bc-tab label="Tab 1">Content 1</bc-tab><bc-tab label="Tab 2">Content 2</bc-tab></bc-tabs>

<!-- bc-tab -->
<bc-tab label="Tab Content">Panel content here</bc-tab>

<!-- bc-row -->
<bc-row gap="1rem"><div>Col 1</div><div>Col 2</div></bc-row>

<!-- bc-column -->
<bc-column width="50%">Half-width column</bc-column>

<!-- bc-header -->
<bc-header title="Page Title" subtitle="Description"></bc-header>

<!-- bc-sheet -->
<bc-sheet title="Card Title">Card content</bc-sheet>

<!-- bc-separator -->
<bc-separator></bc-separator>

<!-- bc-html-block -->
<bc-html-block content="<h2>Title</h2><p>Text</p>"></bc-html-block>

<!-- bc-button-box -->
<bc-button-box><button>Action</button></bc-button-box>

import '@bitcode-framework/ui-web-components/bc-viewer-pdf, @bitcode-framework/ui-web-components/bc-viewer-image, @bitcode-framework/ui-web-components/bc-viewer-video, @bitcode-framework/ui-web-components/bc-viewer-audio, @bitcode-framework/ui-web-components/bc-viewer-document, @bitcode-framework/ui-web-components/bc-viewer-youtube, @bitcode-framework/ui-web-components/bc-viewer-instagram, @bitcode-framework/ui-web-components/bc-viewer-tiktok';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-viewer-pdf */}
      <bc-viewer-pdf src="/files/doc.pdf"></bc-viewer-pdf>

      {/* bc-viewer-image */}
      <bc-viewer-image src="/files/photo.jpg" thumbnail={true}></bc-viewer-image>

      {/* bc-viewer-video */}
      <bc-viewer-video src="/files/clip.mp4"></bc-viewer-video>

      {/* bc-viewer-audio */}
      <bc-viewer-audio src="/files/podcast.mp3"></bc-viewer-audio>

      {/* bc-viewer-document */}
      <bc-viewer-document src="/files/report.docx"></bc-viewer-document>

      {/* bc-viewer-youtube */}
      <bc-viewer-youtube videoId="dQw4w9WgXcQ"></bc-viewer-youtube>

      {/* bc-viewer-instagram */}
      <bc-viewer-instagram postUrl="https://instagram.com/p/xxx"></bc-viewer-instagram>

      {/* bc-viewer-tiktok */}
      <bc-viewer-tiktok videoUrl="https://tiktok.com/@x/video/123"></bc-viewer-tiktok>
    </>
  );
}

<template>
  <!-- bc-viewer-pdf -->
  <bc-viewer-pdf src="/files/doc.pdf"></bc-viewer-pdf>

  <!-- bc-viewer-image -->
  <bc-viewer-image src="/files/photo.jpg" thumbnail></bc-viewer-image>

  <!-- bc-viewer-video -->
  <bc-viewer-video src="/files/clip.mp4"></bc-viewer-video>

  <!-- bc-viewer-audio -->
  <bc-viewer-audio src="/files/podcast.mp3"></bc-viewer-audio>

  <!-- bc-viewer-document -->
  <bc-viewer-document src="/files/report.docx"></bc-viewer-document>

  <!-- bc-viewer-youtube -->
  <bc-viewer-youtube video-id="dQw4w9WgXcQ"></bc-viewer-youtube>

  <!-- bc-viewer-instagram -->
  <bc-viewer-instagram post-url="https://instagram.com/p/xxx"></bc-viewer-instagram>

  <!-- bc-viewer-tiktok -->
  <bc-viewer-tiktok video-url="https://tiktok.com/@x/video/123"></bc-viewer-tiktok>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-viewer-pdf -->
<bc-viewer-pdf src="/files/doc.pdf"></bc-viewer-pdf>

<!-- bc-viewer-image -->
<bc-viewer-image src="/files/photo.jpg" thumbnail></bc-viewer-image>

<!-- bc-viewer-video -->
<bc-viewer-video src="/files/clip.mp4"></bc-viewer-video>

<!-- bc-viewer-audio -->
<bc-viewer-audio src="/files/podcast.mp3"></bc-viewer-audio>

<!-- bc-viewer-document -->
<bc-viewer-document src="/files/report.docx"></bc-viewer-document>

<!-- bc-viewer-youtube -->
<bc-viewer-youtube video-id="dQw4w9WgXcQ"></bc-viewer-youtube>

<!-- bc-viewer-instagram -->
<bc-viewer-instagram post-url="https://instagram.com/p/xxx"></bc-viewer-instagram>

<!-- bc-viewer-tiktok -->
<bc-viewer-tiktok video-url="https://tiktok.com/@x/video/123"></bc-viewer-tiktok>

import '@bitcode-framework/ui-web-components/bc-view-list, @bitcode-framework/ui-web-components/bc-view-form, @bitcode-framework/ui-web-components/bc-view-kanban, @bitcode-framework/ui-web-components/bc-view-calendar, @bitcode-framework/ui-web-components/bc-view-gantt, @bitcode-framework/ui-web-components/bc-view-map, @bitcode-framework/ui-web-components/bc-view-tree, @bitcode-framework/ui-web-components/bc-view-report, @bitcode-framework/ui-web-components/bc-view-editor, @bitcode-framework/ui-web-components/bc-view-activity';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-view-list */}
      <bc-view-list model="contact" fields={["name","email"]}></bc-view-list>

      {/* bc-view-form */}
      <bc-view-form model="contact" fields={["name","email","phone"]}></bc-view-form>

      {/* bc-view-kanban */}
      <bc-view-kanban model="lead" fields={["name","stage"]}></bc-view-kanban>

      {/* bc-view-calendar */}
      <bc-view-calendar model="event" fields={["name","start","end"]}></bc-view-calendar>

      {/* bc-view-gantt */}
      <bc-view-gantt tasks={[{"id":"1","text":"Task 1","start":"2024-01-01","duration":5}]}></bc-view-gantt>

      {/* bc-view-map */}
      <bc-view-map model="branch" fields={["name","lat","lng"]}></bc-view-map>

      {/* bc-view-tree */}
      <bc-view-tree model="category" fields={["name","parent"]}></bc-view-tree>

      {/* bc-view-report */}
      <bc-view-report model="sale" fields={["name","amount"]}></bc-view-report>

      {/* bc-view-editor */}
      <bc-view-editor modelFields={[{"name":"name","type":"string"}]}></bc-view-editor>

      {/* bc-view-activity */}
      <bc-view-activity model="contact" fields={["name","desc"]}></bc-view-activity>
    </>
  );
}

<template>
  <!-- bc-view-list -->
  <bc-view-list model="contact" fields='["name","email"]'></bc-view-list>

  <!-- bc-view-form -->
  <bc-view-form model="contact" fields='["name","email","phone"]'></bc-view-form>

  <!-- bc-view-kanban -->
  <bc-view-kanban model="lead" fields='["name","stage"]'></bc-view-kanban>

  <!-- bc-view-calendar -->
  <bc-view-calendar model="event" fields='["name","start","end"]'></bc-view-calendar>

  <!-- bc-view-gantt -->
  <bc-view-gantt tasks='[{"id":"1","text":"Task 1","start":"2024-01-01","duration":5}]'></bc-view-gantt>

  <!-- bc-view-map -->
  <bc-view-map model="branch" fields='["name","lat","lng"]'></bc-view-map>

  <!-- bc-view-tree -->
  <bc-view-tree model="category" fields='["name","parent"]'></bc-view-tree>

  <!-- bc-view-report -->
  <bc-view-report model="sale" fields='["name","amount"]'></bc-view-report>

  <!-- bc-view-editor -->
  <bc-view-editor model-fields='[{"name":"name","type":"string"}]'></bc-view-editor>

  <!-- bc-view-activity -->
  <bc-view-activity model="contact" fields='["name","desc"]'></bc-view-activity>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-view-list -->
<bc-view-list model="contact" fields='["name","email"]'></bc-view-list>

<!-- bc-view-form -->
<bc-view-form model="contact" fields='["name","email","phone"]'></bc-view-form>

<!-- bc-view-kanban -->
<bc-view-kanban model="lead" fields='["name","stage"]'></bc-view-kanban>

<!-- bc-view-calendar -->
<bc-view-calendar model="event" fields='["name","start","end"]'></bc-view-calendar>

<!-- bc-view-gantt -->
<bc-view-gantt tasks='[{"id":"1","text":"Task 1","start":"2024-01-01","duration":5}]'></bc-view-gantt>

<!-- bc-view-map -->
<bc-view-map model="branch" fields='["name","lat","lng"]'></bc-view-map>

<!-- bc-view-tree -->
<bc-view-tree model="category" fields='["name","parent"]'></bc-view-tree>

<!-- bc-view-report -->
<bc-view-report model="sale" fields='["name","amount"]'></bc-view-report>

<!-- bc-view-editor -->
<bc-view-editor model-fields='[{"name":"name","type":"string"}]'></bc-view-editor>

<!-- bc-view-activity -->
<bc-view-activity model="contact" fields='["name","desc"]'></bc-view-activity>

import '@bitcode-framework/ui-web-components/bc-badge, @bitcode-framework/ui-web-components/bc-progress, @bitcode-framework/ui-web-components/bc-priority, @bitcode-framework/ui-web-components/bc-handle, @bitcode-framework/ui-web-components/bc-copy, @bitcode-framework/ui-web-components/bc-url, @bitcode-framework/ui-web-components/bc-email, @bitcode-framework/ui-web-components/bc-phone, @bitcode-framework/ui-web-components/bc-domain, @bitcode-framework/ui-web-components/bc-statusbar, @bitcode-framework/ui-web-components/bc-placeholder, @bitcode-framework/ui-web-components/bc-sync-status';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-badge */}
      <bc-badge value="Active" variant="success"></bc-badge>

      {/* bc-progress */}
      <bc-progress value="65" max="100"></bc-progress>

      {/* bc-priority */}
      <bc-priority value="3" label="High"></bc-priority>

      {/* bc-handle */}
      <bc-handle></bc-handle>

      {/* bc-copy */}
      <bc-copy value="https://example.com"></bc-copy>

      {/* bc-url */}
      <bc-url value="https://example.com"></bc-url>

      {/* bc-email */}
      <bc-email value="hello@example.com"></bc-email>

      {/* bc-phone */}
      <bc-phone value="+6281234567890"></bc-phone>

      {/* bc-domain */}
      <bc-domain value={[["status","=","active"]]}></bc-domain>

      {/* bc-statusbar */}
      <bc-statusbar states={[{"label":"Draft","value":"draft"}]} value="draft"></bc-statusbar>

      {/* bc-placeholder */}
      <bc-placeholder text="No data"></bc-placeholder>

      {/* bc-sync-status */}
      <bc-sync-status compact={true}></bc-sync-status>
    </>
  );
}

<template>
  <!-- bc-badge -->
  <bc-badge value="Active" variant="success"></bc-badge>

  <!-- bc-progress -->
  <bc-progress value="65" max="100"></bc-progress>

  <!-- bc-priority -->
  <bc-priority value="3" label="High"></bc-priority>

  <!-- bc-handle -->
  <bc-handle></bc-handle>

  <!-- bc-copy -->
  <bc-copy value="https://example.com"></bc-copy>

  <!-- bc-url -->
  <bc-url value="https://example.com"></bc-url>

  <!-- bc-email -->
  <bc-email value="hello@example.com"></bc-email>

  <!-- bc-phone -->
  <bc-phone value="+6281234567890"></bc-phone>

  <!-- bc-domain -->
  <bc-domain value='[["status","=","active"]]'></bc-domain>

  <!-- bc-statusbar -->
  <bc-statusbar states='[{"label":"Draft","value":"draft"}]' value="draft"></bc-statusbar>

  <!-- bc-placeholder -->
  <bc-placeholder text="No data"></bc-placeholder>

  <!-- bc-sync-status -->
  <bc-sync-status compact></bc-sync-status>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-badge -->
<bc-badge value="Active" variant="success"></bc-badge>

<!-- bc-progress -->
<bc-progress value="65" max="100"></bc-progress>

<!-- bc-priority -->
<bc-priority value="3" label="High"></bc-priority>

<!-- bc-handle -->
<bc-handle></bc-handle>

<!-- bc-copy -->
<bc-copy value="https://example.com"></bc-copy>

<!-- bc-url -->
<bc-url value="https://example.com"></bc-url>

<!-- bc-email -->
<bc-email value="hello@example.com"></bc-email>

<!-- bc-phone -->
<bc-phone value="+6281234567890"></bc-phone>

<!-- bc-domain -->
<bc-domain value='[["status","=","active"]]'></bc-domain>

<!-- bc-statusbar -->
<bc-statusbar states='[{"label":"Draft","value":"draft"}]' value="draft"></bc-statusbar>

<!-- bc-placeholder -->
<bc-placeholder text="No data"></bc-placeholder>

<!-- bc-sync-status -->
<bc-sync-status compact></bc-sync-status>

import '@bitcode-framework/ui-web-components/bc-print, @bitcode-framework/ui-web-components/bc-export, @bitcode-framework/ui-web-components/bc-report-link';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-print */}
      <bc-print><h1>Invoice</h1><p>Content to print</p></bc-print>

      {/* bc-export */}
      <bc-export model="contact" format="csv"></bc-export>

      {/* bc-report-link */}
      <bc-report-link report="sales-summary" title="Sales Report"></bc-report-link>
    </>
  );
}

<template>
  <!-- bc-print -->
  <bc-print><h1>Invoice</h1><p>Content to print</p></bc-print>

  <!-- bc-export -->
  <bc-export model="contact" format="csv"></bc-export>

  <!-- bc-report-link -->
  <bc-report-link report="sales-summary" title="Sales Report"></bc-report-link>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-print -->
<bc-print><h1>Invoice</h1><p>Content to print</p></bc-print>

<!-- bc-export -->
<bc-export model="contact" format="csv"></bc-export>

<!-- bc-report-link -->
<bc-report-link report="sales-summary" title="Sales Report"></bc-report-link>

import '@bitcode-framework/ui-web-components/bc-search, @bitcode-framework/ui-web-components/bc-favorites';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-search */}
      <bc-search placeholder="Search..." model="contact"></bc-search>

      {/* bc-favorites */}
      <bc-favorites model="contact"></bc-favorites>
    </>
  );
}

<template>
  <!-- bc-search -->
  <bc-search placeholder="Search..." model="contact"></bc-search>

  <!-- bc-favorites -->
  <bc-favorites model="contact"></bc-favorites>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-search -->
<bc-search placeholder="Search..." model="contact"></bc-search>

<!-- bc-favorites -->
<bc-favorites model="contact"></bc-favorites>

import '@bitcode-framework/ui-web-components/bc-chatter, @bitcode-framework/ui-web-components/bc-timeline, @bitcode-framework/ui-web-components/bc-activity';
// All bc-* tags work as JSX — they're standard Web Components
// Set props via attributes or ref

export default function Demo() {
  return (
    <>
      {/* bc-chatter */}
      <bc-chatter model="contact" record-id="1"></bc-chatter>

      {/* bc-timeline */}
      <bc-timeline model="contact" record-id="1"></bc-timeline>

      {/* bc-activity */}
      <bc-activity model="contact" record-id="1"></bc-activity>
    </>
  );
}

<template>
  <!-- bc-chatter -->
  <bc-chatter model="contact" record-id="1"></bc-chatter>

  <!-- bc-timeline -->
  <bc-timeline model="contact" record-id="1"></bc-timeline>

  <!-- bc-activity -->
  <bc-activity model="contact" record-id="1"></bc-activity>
</template>

<script setup>
// No import needed — bc-* components are registered globally
// via '@bitcode-framework/ui-web-components' loader in main.ts
</script>

<!-- app-demo.component.html -->
<!-- Add CUSTOM_ELEMENTS_SCHEMA to your module -->
<!-- bc-chatter -->
<bc-chatter model="contact" record-id="1"></bc-chatter>

<!-- bc-timeline -->
<bc-timeline model="contact" record-id="1"></bc-timeline>

<!-- bc-activity -->
<bc-activity model="contact" record-id="1"></bc-activity>