@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/page-header/PageHeader04.svelte

@@ -0,0 +1,49 @@
+<!--
+  PageHeader04.svelte
+  Breadcrumb + title + description left, inline search bar right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    class: className = '',
+    breadcrumbs = [{ label: 'Home', href: '#' }, { label: 'Settings', href: '#' }, { label: 'Profile details' }],
+    title = 'Project alpha',
+    description = 'Manage your profile details such as name, avatar, email and bio.',
+    searchPlaceholder = 'Search'
+  }: {
+    class?: string;
+    breadcrumbs?: Array<{ label: string; href?: string }>;
+    title?: string;
+    description?: string;
+    searchPlaceholder?: string;
+  } = $props();
+</script>
+
+<div class={cn('py-4', className)}>
+  <!-- Breadcrumb -->
+  <nav class="mb-4 flex items-center gap-1.5 text-sm text-muted-foreground">
+    {#each breadcrumbs as crumb, i}
+      {#if i > 0}
+        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+      {/if}
+      {#if crumb.href && i < breadcrumbs.length - 1}
+        <a href={crumb.href} class="hover:text-foreground">{crumb.label}</a>
+      {:else}
+        <span class={i === breadcrumbs.length - 1 ? 'font-medium text-foreground' : ''}>{crumb.label}</span>
+      {/if}
+    {/each}
+  </nav>
+
+  <!-- Header row -->
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h1 class="text-2xl font-bold">{title}</h1>
+      {#if description}<p class="mt-1 text-sm text-muted-foreground">{description}</p>{/if}
+    </div>
+    <div class="flex shrink-0 items-center gap-2 rounded-md border bg-background px-3 py-1.5">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input type="text" placeholder={searchPlaceholder} class="w-44 bg-transparent text-sm outline-none placeholder:text-muted-foreground" />
+    </div>
+  </div>
+</div>

package/src/registry/blocks/page-header/PageHeader05.svelte

@@ -0,0 +1,49 @@
+<!--
+  PageHeader05.svelte
+  Compact one-liner: title left + icon+label action buttons right. No breadcrumb.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    title = 'Project alpha',
+    onview = () => {},
+    onshare = () => {},
+    onedit = () => {},
+    onpublish = () => {}
+  }: {
+    class?: string;
+    title?: string;
+    onview?: () => void;
+    onshare?: () => void;
+    onedit?: () => void;
+    onpublish?: () => void;
+  } = $props();
+</script>
+
+<div class={cn('flex flex-wrap items-center justify-between gap-3 py-3', className)}>
+  <h1 class="text-xl font-bold">{title}</h1>
+  <div class="flex items-center gap-2">
+    <Button variant="ghost" size="sm" onclick={onview} class="gap-1.5">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>
+      View
+    </Button>
+    <Button variant="ghost" size="sm" onclick={onshare} class="gap-1.5">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
+      Share
+    </Button>
+    <Button variant="ghost" size="sm" onclick={onedit} class="gap-1.5">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+      Edit
+    </Button>
+    <Button size="sm" onclick={onpublish} class="gap-1.5">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+      Publish
+    </Button>
+    <Button variant="ghost" size="icon" class="h-8 w-8">
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+    </Button>
+  </div>
+</div>

package/src/registry/blocks/page-header/PageHeader06.svelte

@@ -0,0 +1,58 @@
+<!--
+  PageHeader06.svelte
+  Avatar + name + email left, View/Share/Edit/Save action buttons right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    user = { name: 'John Doe', email: 'hi@example.com', avatar: '' },
+    onview = () => {},
+    onshare = () => {},
+    onedit = () => {},
+    onsave = () => {}
+  }: {
+    class?: string;
+    user?: { name: string; email: string; avatar?: string };
+    onview?: () => void;
+    onshare?: () => void;
+    onedit?: () => void;
+    onsave?: () => void;
+  } = $props();
+
+  function initials(name: string) {
+    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+  }
+</script>
+
+<div class={cn('flex flex-col gap-4 py-4 sm:flex-row sm:items-center sm:justify-between', className)}>
+  <!-- User info -->
+  <div class="flex items-center gap-3">
+    <div class="relative h-10 w-10 shrink-0 overflow-hidden rounded-full">
+      {#if user.avatar}
+        <img src={user.avatar} alt={user.name} class="h-full w-full object-cover" />
+      {:else}
+        <div class="flex h-full w-full items-center justify-center bg-muted text-sm font-semibold">
+          {initials(user.name)}
+        </div>
+      {/if}
+    </div>
+    <div>
+      <p class="font-semibold">{user.name}</p>
+      <p class="text-sm text-muted-foreground">{user.email}</p>
+    </div>
+  </div>
+
+  <!-- Actions -->
+  <div class="flex shrink-0 items-center gap-2">
+    <Button variant="outline" size="sm" onclick={onview}>View</Button>
+    <Button variant="outline" size="sm" onclick={onshare}>Share</Button>
+    <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+    <Button size="sm" onclick={onsave}>Save</Button>
+    <Button variant="ghost" size="icon" class="h-8 w-8">
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+    </Button>
+  </div>
+</div>

package/src/registry/blocks/page-header/PageHeader07.svelte

@@ -0,0 +1,64 @@
+<!--
+  PageHeader07.svelte
+  Title + description + Share/View/Edit/Publish right, tabs row below.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    title = 'Profile details',
+    description = 'Manage your profile details such as name, avatar, email and bio.',
+    tabs = ['Profile', 'Reports', 'Analytics', 'Notifications', 'Help Center'],
+    activeTab = 'Profile',
+    onshare = () => {},
+    onview = () => {},
+    onedit = () => {},
+    onpublish = () => {}
+  }: {
+    class?: string;
+    title?: string;
+    description?: string;
+    tabs?: string[];
+    activeTab?: string;
+    onshare?: () => void;
+    onview?: () => void;
+    onedit?: () => void;
+    onpublish?: () => void;
+  } = $props();
+
+  let currentTab = $state(activeTab);
+</script>
+
+<div class={cn('', className)}>
+  <!-- Header row -->
+  <div class="flex flex-col gap-4 pb-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h1 class="text-2xl font-bold">{title}</h1>
+      {#if description}<p class="mt-1 text-sm text-muted-foreground">{description}</p>{/if}
+    </div>
+    <div class="flex shrink-0 items-center gap-2">
+      <Button variant="outline" size="sm" onclick={onshare}>Share</Button>
+      <Button variant="outline" size="sm" onclick={onview}>View</Button>
+      <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+      <Button size="sm" onclick={onpublish}>Publish</Button>
+    </div>
+  </div>
+
+  <!-- Tabs below header -->
+  <div class="flex gap-0 overflow-x-auto border-b">
+    {#each tabs as tab}
+      <button
+        type="button"
+        onclick={() => (currentTab = tab)}
+        class={cn(
+          'shrink-0 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors',
+          currentTab === tab
+            ? 'border-foreground text-foreground'
+            : 'border-transparent text-muted-foreground hover:text-foreground'
+        )}
+      >{tab}</button>
+    {/each}
+  </div>
+</div>

package/src/registry/blocks/page-header/PageHeader08.svelte

@@ -0,0 +1,68 @@
+<!--
+  PageHeader08.svelte
+  Search top-left + avatar top-right, then title + description + Share/View/Edit/Publish below.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    searchPlaceholder = 'Search',
+    user = { name: 'shadcn', email: 'm@example.com', avatar: '' },
+    title = 'Project alpha',
+    description = 'Manage your project\'s details such as name, image, description and settings.',
+    onshare = () => {},
+    onview = () => {},
+    onedit = () => {},
+    onpublish = () => {}
+  }: {
+    class?: string;
+    searchPlaceholder?: string;
+    user?: { name: string; email: string; avatar?: string };
+    title?: string;
+    description?: string;
+    onshare?: () => void;
+    onview?: () => void;
+    onedit?: () => void;
+    onpublish?: () => void;
+  } = $props();
+
+  function initials(name: string) {
+    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+  }
+</script>
+
+<div class={cn('py-4', className)}>
+  <!-- Top bar: search + avatar -->
+  <div class="mb-6 flex items-center justify-between gap-4">
+    <div class="flex items-center gap-2 rounded-md border bg-background px-3 py-1.5">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input type="text" placeholder={searchPlaceholder} class="w-40 bg-transparent text-sm outline-none placeholder:text-muted-foreground" />
+    </div>
+    <div class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-border">
+      {#if user.avatar}
+        <img src={user.avatar} alt={user.name} class="h-full w-full object-cover" />
+      {:else}
+        <span class="text-xs font-semibold">{initials(user.name)}</span>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Page header -->
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h1 class="text-2xl font-bold">{title}</h1>
+      {#if description}<p class="mt-1 text-sm text-muted-foreground">{description}</p>{/if}
+    </div>
+    <div class="flex shrink-0 items-center gap-2">
+      <Button variant="outline" size="sm" onclick={onshare}>Share</Button>
+      <Button variant="outline" size="sm" onclick={onview}>View</Button>
+      <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+      <Button size="sm" onclick={onpublish}>Publish</Button>
+      <Button variant="ghost" size="icon" class="h-8 w-8">
+        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+      </Button>
+    </div>
+  </div>
+</div>

package/src/registry/blocks/page-header/index.ts

@@ -0,0 +1,8 @@
+export { default as PageHeader01 } from './PageHeader01.svelte';
+export { default as PageHeader02 } from './PageHeader02.svelte';
+export { default as PageHeader03 } from './PageHeader03.svelte';
+export { default as PageHeader04 } from './PageHeader04.svelte';
+export { default as PageHeader05 } from './PageHeader05.svelte';
+export { default as PageHeader06 } from './PageHeader06.svelte';
+export { default as PageHeader07 } from './PageHeader07.svelte';
+export { default as PageHeader08 } from './PageHeader08.svelte';

package/src/registry/blocks/playground/PlaygroundBlock01.svelte

@@ -0,0 +1,162 @@
+<!--
+  PlaygroundBlock01.svelte
+  Simple AI playground with model selector, textarea, and parameter panel.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Input,
+    Label,
+    Select,
+    Textarea,
+    Tabs,
+    TabsList,
+    TabsTrigger,
+    TabsContent
+  } from '$lib/components/ui';
+  import Separator from '$lib/components/ui/Separator.svelte';
+
+  let {
+    class: className = '',
+    models = [
+      { value: 'gpt-4', label: 'GPT-4' },
+      { value: 'gpt-3.5', label: 'GPT-3.5 Turbo' },
+      { value: 'claude-3', label: 'Claude 3' }
+    ]
+  }: {
+    class?: string;
+    models?: Array<{ value: string; label: string }>;
+  } = $props();
+
+  let selectedModel = $state(models[0]?.value ?? '');
+  let prompt = $state('');
+  let temperature = $state(0.7);
+  let maxLength = $state(256);
+  let topP = $state(0.9);
+  let activeTab = $state('complete');
+</script>
+
+<div class={cn('flex h-screen flex-col', className)}>
+  <!-- Header -->
+  <div class="flex items-center justify-between border-b px-4 py-3">
+    <h1 class="text-lg font-semibold">Playground</h1>
+    <div class="flex items-center gap-2">
+      <Select
+        options={models}
+        bind:value={selectedModel}
+        placeholder="Select model"
+      />
+      <Button variant="outline" size="sm">Save</Button>
+      <Button variant="outline" size="sm">
+        <!-- Lucide: Code -->
+        View code
+      </Button>
+      <Button variant="outline" size="sm">
+        <!-- Lucide: Share -->
+        Share
+      </Button>
+    </div>
+  </div>
+
+  <!-- Main Area -->
+  <div class="flex flex-1 overflow-hidden">
+    <!-- Prompt Area -->
+    <div class="flex flex-1 flex-col p-4">
+      <Tabs value={activeTab}>
+        <TabsList>
+          <TabsTrigger value="complete">Complete</TabsTrigger>
+          <TabsTrigger value="insert">Insert</TabsTrigger>
+          <TabsTrigger value="edit">Edit</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="complete" class="flex-1">
+          <Textarea
+            placeholder="Write a tagline for an ice cream shop..."
+            bind:value={prompt}
+            class="min-h-[300px] resize-none"
+          />
+        </TabsContent>
+
+        <TabsContent value="insert">
+          <Textarea
+            placeholder="Insert text here..."
+            bind:value={prompt}
+            class="min-h-[300px] resize-none"
+          />
+        </TabsContent>
+
+        <TabsContent value="edit">
+          <Textarea
+            placeholder="Edit prompt..."
+            bind:value={prompt}
+            class="min-h-[300px] resize-none"
+          />
+        </TabsContent>
+      </Tabs>
+
+      <!-- Footer -->
+      <div class="mt-4 flex items-center gap-2">
+        <Button>Submit</Button>
+        <Button variant="ghost" size="sm">
+          <!-- Lucide: RotateCcw -->
+          <span class="text-xs">Reset</span>
+        </Button>
+      </div>
+    </div>
+
+    <!-- Right Panel: Parameters -->
+    <aside class="w-72 shrink-0 border-l bg-background p-4">
+      <div class="space-y-6">
+        <div class="space-y-2">
+          <Label>Model</Label>
+          <Select
+            options={models}
+            bind:value={selectedModel}
+            placeholder="Select model"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <Label>Temperature</Label>
+            <span class="text-sm text-muted-foreground">{temperature}</span>
+          </div>
+          <input
+            type="range"
+            min="0"
+            max="2"
+            step="0.1"
+            bind:value={temperature}
+            class="w-full accent-primary"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <Label>Maximum Length</Label>
+          <Input
+            type="number"
+            bind:value={maxLength}
+            min={1}
+            max={4096}
+          />
+        </div>
+
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <Label>Top P</Label>
+            <span class="text-sm text-muted-foreground">{topP}</span>
+          </div>
+          <input
+            type="range"
+            min="0"
+            max="1"
+            step="0.05"
+            bind:value={topP}
+            class="w-full accent-primary"
+          />
+        </div>
+      </div>
+    </aside>
+  </div>
+</div>

package/src/registry/blocks/playground/PlaygroundBlock02.svelte

@@ -0,0 +1,156 @@
+<!--
+  PlaygroundBlock02.svelte
+  AI playground with separate Input and Instructions textareas plus parameter panel.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Input,
+    Label,
+    Select,
+    Textarea
+  } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    models = [
+      { value: 'gpt-4', label: 'GPT-4' },
+      { value: 'gpt-3.5', label: 'GPT-3.5 Turbo' },
+      { value: 'claude-3', label: 'Claude 3' }
+    ]
+  }: {
+    class?: string;
+    models?: Array<{ value: string; label: string }>;
+  } = $props();
+
+  let selectedModel = $state(models[0]?.value ?? '');
+  let inputText = $state('');
+  let instructions = $state('');
+  let output = $state('');
+  let temperature = $state(0.7);
+  let maxLength = $state(256);
+  let topP = $state(0.9);
+</script>
+
+<div class={cn('flex h-screen flex-col', className)}>
+  <!-- Header -->
+  <div class="flex items-center justify-between border-b px-4 py-3">
+    <h1 class="text-lg font-semibold">Playground</h1>
+    <div class="flex items-center gap-2">
+      <Select
+        options={models}
+        bind:value={selectedModel}
+        placeholder="Select model"
+      />
+      <Button variant="outline" size="sm">Save</Button>
+      <Button variant="outline" size="sm">
+        <!-- Lucide: Code -->
+        View code
+      </Button>
+      <Button variant="outline" size="sm">
+        <!-- Lucide: Share -->
+        Share
+      </Button>
+    </div>
+  </div>
+
+  <!-- Main Area -->
+  <div class="flex flex-1 overflow-hidden">
+    <!-- Left: Input + Output -->
+    <div class="flex flex-1 flex-col gap-4 p-4">
+      <!-- Input Section -->
+      <div class="space-y-2">
+        <Label>Input</Label>
+        <Textarea
+          placeholder="Enter your input here..."
+          bind:value={inputText}
+          class="min-h-[120px] resize-none"
+        />
+      </div>
+
+      <!-- Main Output Area -->
+      <div class="flex-1 space-y-2">
+        <Label>Output</Label>
+        <Textarea
+          placeholder="Output will appear here..."
+          bind:value={output}
+          class="min-h-[200px] flex-1 resize-none"
+        />
+      </div>
+
+      <!-- Instructions -->
+      <div class="space-y-2">
+        <Label>Instructions</Label>
+        <Textarea
+          placeholder="Enter instructions for the model..."
+          bind:value={instructions}
+          class="min-h-[100px] resize-none"
+        />
+      </div>
+
+      <!-- Footer -->
+      <div class="flex items-center gap-2">
+        <Button>Submit</Button>
+        <Button variant="ghost" size="sm">
+          <!-- Lucide: RotateCcw -->
+          <span class="text-xs">Reset</span>
+        </Button>
+      </div>
+    </div>
+
+    <!-- Right Panel: Parameters -->
+    <aside class="w-72 shrink-0 border-l bg-background p-4">
+      <div class="space-y-6">
+        <div class="space-y-2">
+          <Label>Model</Label>
+          <Select
+            options={models}
+            bind:value={selectedModel}
+            placeholder="Select model"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <Label>Temperature</Label>
+            <span class="text-sm text-muted-foreground">{temperature}</span>
+          </div>
+          <input
+            type="range"
+            min="0"
+            max="2"
+            step="0.1"
+            bind:value={temperature}
+            class="w-full accent-primary"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <Label>Maximum Length</Label>
+          <Input
+            type="number"
+            bind:value={maxLength}
+            min={1}
+            max={4096}
+          />
+        </div>
+
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <Label>Top P</Label>
+            <span class="text-sm text-muted-foreground">{topP}</span>
+          </div>
+          <input
+            type="range"
+            min="0"
+            max="1"
+            step="0.05"
+            bind:value={topP}
+            class="w-full accent-primary"
+          />
+        </div>
+      </div>
+    </aside>
+  </div>
+</div>

package/src/registry/blocks/playground/index.ts

@@ -0,0 +1,2 @@
+export { default as PlaygroundBlock01 } from './PlaygroundBlock01.svelte';
+export { default as PlaygroundBlock02 } from './PlaygroundBlock02.svelte';