@miozu/jera 0.0.2 → 0.4.2

package/src/components/docs/PropsTable.svelte

@@ -0,0 +1,136 @@
+<!--
+  @component PropsTable
+
+  Display component/function props in a clean, readable table.
+  Commonly used for API documentation.
+
+  @example
+  ```svelte
+  <PropsTable props={[
+    { name: 'variant', type: 'string', default: '"default"', description: 'Visual style' },
+    { name: 'disabled', type: 'boolean', default: 'false', description: 'Disable interactions' },
+    { name: 'onclick', type: 'function', required: true, description: 'Click handler' }
+  ]} />
+  ```
+-->
+<script>
+  /**
+   * @typedef {Object} PropDef
+   * @property {string} name - Property name
+   * @property {string} type - Type annotation
+   * @property {string} [default] - Default value
+   * @property {string} description - Description
+   * @property {boolean} [required] - Whether prop is required
+   */
+
+  /** @type {{ props: PropDef[], class?: string }} */
+  let {
+    props = [],
+    class: className = ''
+  } = $props();
+</script>
+
+<div class="jera-props-table {className}">
+  <table>
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Type</th>
+        <th>Default</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each props as prop}
+        <tr>
+          <td class="prop-name">
+            <code>{prop.name}</code>
+            {#if prop.required}
+              <span class="required" title="Required">*</span>
+            {/if}
+          </td>
+          <td class="prop-type">
+            <code>{prop.type}</code>
+          </td>
+          <td class="prop-default">
+            {#if prop.default !== undefined}
+              <code>{prop.default}</code>
+            {:else}
+              <span class="muted">-</span>
+            {/if}
+          </td>
+          <td class="prop-desc">{prop.description}</td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .jera-props-table {
+    overflow-x: auto;
+    border: 1px solid var(--color-border, var(--base2, #2d3748));
+    border-radius: var(--radius-md, 0.5rem);
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+  }
+
+  th {
+    text-align: left;
+    padding: 0.75rem 1rem;
+    background: var(--color-base1, var(--base1, #1a1f26));
+    border-bottom: 1px solid var(--color-border, var(--base2, #2d3748));
+    font-weight: 500;
+    color: var(--color-base5, var(--base5, #e2e8f0));
+    white-space: nowrap;
+  }
+
+  td {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--color-border, var(--base2, #2d3748));
+    vertical-align: top;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  .prop-name code {
+    font-family: var(--font-mono, monospace);
+    font-weight: 500;
+    color: var(--color-primary, var(--magenta, #c974e6));
+  }
+
+  .required {
+    color: var(--color-error, var(--red, #eb3137));
+    margin-left: 0.25rem;
+  }
+
+  .prop-type code {
+    font-family: var(--font-mono, monospace);
+    font-size: 0.8125rem;
+    color: var(--color-base4, var(--base4, #a0aec0));
+    background: var(--color-base1, var(--base1, #1a1f26));
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+  }
+
+  .prop-default code {
+    font-family: var(--font-mono, monospace);
+    font-size: 0.8125rem;
+    color: var(--color-success, var(--green, #6dd672));
+  }
+
+  .muted {
+    color: var(--color-base3, var(--base3, #4a5568));
+  }
+
+  .prop-desc {
+    color: var(--color-base4, var(--base4, #a0aec0));
+    line-height: 1.5;
+  }
+</style>

package/src/components/docs/SplitPane.svelte

@@ -0,0 +1,98 @@
+<!--
+  @component SplitPane
+
+  Two-pane layout component for documentation with description on the left
+  and code/examples on the right. Responsive - stacks vertically on mobile.
+
+  @example
+  ```svelte
+  <SplitPane>
+    {#snippet left()}
+      <h2>Function Description</h2>
+      <p>This function does something amazing...</p>
+    {/snippet}
+    {#snippet right()}
+      <CodeBlock code={exampleCode} lang="javascript" />
+    {/snippet}
+  </SplitPane>
+  ```
+-->
+<script>
+  let {
+    /** Left pane content (description, prose) */
+    left,
+    /** Right pane content (code, examples) */
+    right,
+    /** Ratio of left:right pane widths (e.g., '1:1', '2:1', '3:2') */
+    ratio = '1:1',
+    /** Gap between panes */
+    gap = '2rem',
+    /** Minimum height */
+    minHeight = 'auto',
+    /** Whether both panes should independently scroll */
+    stickyRight = false,
+    /** Additional CSS classes */
+    class: className = ''
+  } = $props();
+
+  // Parse ratio into flex values
+  const [leftFlex, rightFlex] = $derived.by(() => {
+    const parts = ratio.split(':').map(Number);
+    return [parts[0] || 1, parts[1] || 1];
+  });
+</script>
+
+<div
+  class="jera-split-pane {className}"
+  class:sticky-right={stickyRight}
+  style:--gap={gap}
+  style:--left-flex={leftFlex}
+  style:--right-flex={rightFlex}
+  style:--min-height={minHeight}
+>
+  <div class="pane pane-left">
+    {@render left?.()}
+  </div>
+  <div class="pane pane-right">
+    {@render right?.()}
+  </div>
+</div>
+
+<style>
+  .jera-split-pane {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    min-height: var(--min-height);
+    width: 100%;
+  }
+
+  @media (min-width: 1024px) {
+    .jera-split-pane {
+      flex-direction: row;
+    }
+  }
+
+  .pane {
+    min-width: 0;
+  }
+
+  .pane-left {
+    flex: var(--left-flex);
+  }
+
+  .pane-right {
+    flex: var(--right-flex);
+  }
+
+  /* Sticky right pane for scrollable docs */
+  @media (min-width: 1024px) {
+    .sticky-right .pane-right {
+      position: sticky;
+      top: 1rem;
+      align-self: flex-start;
+      max-height: calc(100vh - 2rem);
+      overflow-y: auto;
+    }
+  }
+</style>

package/src/components/docs/index.js

@@ -0,0 +1,14 @@
+/**
+ * Documentation components for @miozu/jera
+ *
+ * Components for building documentation sites with syntax highlighting,
+ * split-pane layouts, and structured content sections.
+ *
+ * @example
+ * import { CodeBlock, PropsTable, SplitPane, DocSection } from '@miozu/jera';
+ */
+
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as PropsTable } from './PropsTable.svelte';
+export { default as SplitPane } from './SplitPane.svelte';
+export { default as DocSection } from './DocSection.svelte';

package/src/components/feedback/Alert.svelte

@@ -0,0 +1,234 @@
+<!--
+  @component Alert
+
+  An inline alert/notice banner for displaying messages.
+  Different from Toast (which is transient) - Alert stays visible in the layout.
+
+  @example Basic
+  <Alert variant="info">This is an informational message.</Alert>
+
+  @example With title
+  <Alert variant="warning" title="Warning">
+    Please review your settings before continuing.
+  </Alert>
+
+  @example Dismissible
+  <Alert variant="error" dismissible onclose={() => showAlert = false}>
+    An error occurred while processing your request.
+  </Alert>
+
+  @example With icon snippet
+  <Alert variant="success">
+    {#snippet icon()}
+      <CheckIcon size={16} />
+    {/snippet}
+    Your changes have been saved successfully.
+  </Alert>
+
+  @example With actions
+  <Alert variant="info" title="New version available">
+    A new version is available for download.
+    {#snippet actions()}
+      <Button size="sm" variant="primary">Update Now</Button>
+      <Button size="sm" variant="ghost">Later</Button>
+    {/snippet}
+  </Alert>
+-->
+<script>
+  let {
+    variant = 'info',
+    title = '',
+    dismissible = false,
+    size = 'md',
+    class: className = '',
+    onclose,
+    icon,
+    actions,
+    children
+  } = $props();
+
+  let visible = $state(true);
+
+  function handleClose() {
+    visible = false;
+    onclose?.();
+  }
+</script>
+
+{#if visible}
+  <div
+    class="alert alert-{variant} alert-{size} {className}"
+    role="alert"
+  >
+    {#if icon}
+      <div class="alert-icon">
+        {@render icon()}
+      </div>
+    {:else}
+      <div class="alert-icon alert-icon-default">
+        {#if variant === 'success'}
+          <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0-1.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm2.354-7.354a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/></svg>
+        {:else if variant === 'error'}
+          <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0-1.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM7.25 5v3.5a.75.75 0 0 0 1.5 0V5a.75.75 0 0 0-1.5 0zm.75 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/></svg>
+        {:else if variant === 'warning'}
+          <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1.5a.75.75 0 0 1 .65.38l6.25 10.75a.75.75 0 0 1-.65 1.12H1.75a.75.75 0 0 1-.65-1.12L7.35 1.88A.75.75 0 0 1 8 1.5zm0 1.73L2.57 12.25h10.86L8 3.23zM7.25 6v2.5a.75.75 0 0 0 1.5 0V6a.75.75 0 0 0-1.5 0zm.75 5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/></svg>
+        {:else}
+          <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0-1.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM7.25 5a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0V5zm.75 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/></svg>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="alert-content">
+      {#if title}
+        <div class="alert-title">{title}</div>
+      {/if}
+      <div class="alert-message">
+        {@render children?.()}
+      </div>
+      {#if actions}
+        <div class="alert-actions">
+          {@render actions()}
+        </div>
+      {/if}
+    </div>
+
+    {#if dismissible}
+      <button
+        type="button"
+        class="alert-close"
+        onclick={handleClose}
+        aria-label="Dismiss"
+      >
+        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M4.28 3.22a.75.75 0 0 0-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 1 0 1.06 1.06L8 9.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L9.06 8l3.72-3.72a.75.75 0 0 0-1.06-1.06L8 6.94 4.28 3.22z"/></svg>
+      </button>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    border-radius: var(--radius-lg);
+    border: 1px solid;
+  }
+
+  /* Size variants */
+  .alert-sm {
+    padding: var(--space-2) var(--space-3);
+  }
+
+  .alert-md {
+    padding: var(--space-3) var(--space-4);
+  }
+
+  .alert-lg {
+    padding: var(--space-4) var(--space-5);
+  }
+
+  /* Variant colors */
+  .alert-info {
+    background: color-mix(in srgb, var(--color-base0D) 8%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0D) 25%, transparent);
+    color: var(--color-base0D);
+  }
+
+  .alert-success {
+    background: color-mix(in srgb, var(--color-base0B) 8%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0B) 25%, transparent);
+    color: var(--color-base0B);
+  }
+
+  .alert-warning {
+    background: color-mix(in srgb, var(--color-base0A) 8%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0A) 25%, transparent);
+    color: var(--color-base0A);
+  }
+
+  .alert-error {
+    background: color-mix(in srgb, var(--color-base08) 8%, transparent);
+    border-color: color-mix(in srgb, var(--color-base08) 25%, transparent);
+    color: var(--color-base08);
+  }
+
+  /* Icon */
+  .alert-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .alert-icon-default svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .alert-lg .alert-icon-default svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* Content */
+  .alert-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .alert-title {
+    font-weight: 600;
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-1);
+  }
+
+  .alert-info .alert-title { color: var(--color-base0D); }
+  .alert-success .alert-title { color: var(--color-base0B); }
+  .alert-warning .alert-title { color: var(--color-base0A); }
+  .alert-error .alert-title { color: var(--color-base08); }
+
+  .alert-message {
+    font-size: var(--text-sm);
+    color: var(--color-base05);
+    line-height: 1.5;
+  }
+
+  .alert-lg .alert-message {
+    font-size: var(--text-base);
+  }
+
+  .alert-actions {
+    display: flex;
+    gap: var(--space-2);
+    margin-top: var(--space-3);
+  }
+
+  /* Close button */
+  .alert-close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    margin: calc(var(--space-1) * -1);
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: currentColor;
+    opacity: 0.6;
+    cursor: pointer;
+    transition: opacity 0.2s ease, background 0.2s ease;
+  }
+
+  .alert-close:hover {
+    opacity: 1;
+    background: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .alert-close svg {
+    width: 14px;
+    height: 14px;
+  }
+</style>

package/src/components/feedback/EmptyState.svelte

@@ -0,0 +1,179 @@
+<!--
+  @component EmptyState
+
+  A complete empty state UI with icon, title, description, and action buttons.
+
+  @example Basic
+  <EmptyState
+    title="No items found"
+    description="Try adjusting your search or filters"
+  />
+
+  @example With icon and action
+  <EmptyState
+    title="No messages"
+    description="Start a conversation to see messages here"
+  >
+    {#snippet icon()}
+      <MessageIcon size={32} />
+    {/snippet}
+    {#snippet actions()}
+      <Button variant="primary" onclick={startChat}>New Message</Button>
+    {/snippet}
+  </EmptyState>
+
+  @example Compact size
+  <EmptyState size="compact" title="No results" />
+-->
+<script>
+  let {
+    title = 'No data found',
+    description = '',
+    size = 'default',
+    class: className = '',
+    icon,
+    actions
+  } = $props();
+</script>
+
+<div class="empty-state empty-state-{size} {className}">
+  <div class="empty-state-content">
+    {#if icon}
+      <div class="empty-state-icon">
+        {@render icon()}
+      </div>
+    {/if}
+
+    <div class="empty-state-text">
+      <h3 class="empty-state-title">{title}</h3>
+      {#if description}
+        <p class="empty-state-description">{description}</p>
+      {/if}
+    </div>
+
+    {#if actions}
+      <div class="empty-state-actions">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: var(--space-16) var(--space-6);
+  }
+
+  .empty-state-compact {
+    padding: var(--space-8) var(--space-4);
+  }
+
+  .empty-state-large {
+    padding: var(--space-24) var(--space-6);
+  }
+
+  .empty-state-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 24rem;
+  }
+
+  .empty-state-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 4rem;
+    height: 4rem;
+    margin-bottom: var(--space-6);
+    border-radius: 9999px;
+    background: var(--color-base01);
+    color: var(--color-base04);
+    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
+  }
+
+  .empty-state-compact .empty-state-icon {
+    width: 3rem;
+    height: 3rem;
+    margin-bottom: var(--space-4);
+  }
+
+  .empty-state-large .empty-state-icon {
+    width: 5rem;
+    height: 5rem;
+    margin-bottom: var(--space-8);
+  }
+
+  .empty-state:hover .empty-state-icon {
+    background: var(--color-base02);
+    color: var(--color-base05);
+    transform: scale(1.05);
+  }
+
+  .empty-state-text {
+    margin-bottom: var(--space-6);
+  }
+
+  .empty-state-compact .empty-state-text {
+    margin-bottom: var(--space-4);
+  }
+
+  .empty-state-large .empty-state-text {
+    margin-bottom: var(--space-8);
+  }
+
+  .empty-state-title {
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--text-lg);
+    font-weight: 600;
+    color: var(--color-base07);
+    line-height: 1.3;
+  }
+
+  .empty-state-compact .empty-state-title {
+    font-size: var(--text-base);
+    font-weight: 500;
+  }
+
+  .empty-state-large .empty-state-title {
+    font-size: var(--text-xl);
+  }
+
+  .empty-state-description {
+    margin: 0;
+    font-size: var(--text-sm);
+    color: var(--color-base04);
+    line-height: 1.5;
+    max-width: 20rem;
+  }
+
+  .empty-state-compact .empty-state-description {
+    font-size: var(--text-xs);
+  }
+
+  .empty-state-large .empty-state-description {
+    font-size: var(--text-base);
+    max-width: 24rem;
+  }
+
+  .empty-state-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .empty-state-compact .empty-state-actions {
+    gap: var(--space-2);
+  }
+
+  .empty-state-large .empty-state-actions {
+    gap: var(--space-4);
+  }
+</style>