bloko-ui 0.0.1

package/dist/components/IconButton.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'default' | 'ghost' | 'destructive';
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    title?: string;
+    onclick?: () => void;
+    children: Snippet;
+  }
+
+  let {
+    variant = 'default',
+    size = 'md',
+    disabled = false,
+    title,
+    onclick,
+    children
+  }: Props = $props();
+</script>
+
+<button
+  type="button"
+  class="icon-button {variant} {size}"
+  {disabled}
+  {title}
+  {onclick}
+  aria-label={title}
+>
+  {@render children()}
+</button>
+
+<style>
+  .icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .icon-button.sm {
+    width: 24px;
+    height: 24px;
+  }
+
+  .icon-button.md {
+    width: 28px;
+    height: 28px;
+  }
+
+  .icon-button.default {
+    background: #f4f4f5;
+    color: #3f3f46;
+  }
+
+  .icon-button.default:hover:not(:disabled) {
+    background: #e4e4e7;
+  }
+
+  .icon-button.ghost {
+    background: transparent;
+    color: #71717a;
+  }
+
+  .icon-button.ghost:hover:not(:disabled) {
+    background: #f4f4f5;
+    color: #3f3f46;
+  }
+
+  .icon-button.destructive {
+    background: transparent;
+    color: #71717a;
+  }
+
+  .icon-button.destructive:hover:not(:disabled) {
+    background: #fef2f2;
+    color: #dc2626;
+  }
+
+  .icon-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>

package/dist/components/IconButton.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    variant?: 'default' | 'ghost' | 'destructive';
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    title?: string;
+    onclick?: () => void;
+    children: Snippet;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/Input.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  interface Props {
+    type?: 'text' | 'password' | 'email' | 'number' | 'search';
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: 'sm' | 'md';
+    mono?: boolean;
+    oninput?: (e: Event) => void;
+    onchange?: (e: Event) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+  }
+
+  let {
+    type = 'text',
+    value = $bindable(''),
+    placeholder = '',
+    disabled = false,
+    readonly = false,
+    size = 'sm',
+    mono = false,
+    oninput,
+    onchange,
+    onkeydown
+  }: Props = $props();
+</script>
+
+<input
+  class="input input-{size}"
+  class:mono
+  {type}
+  bind:value
+  {placeholder}
+  {disabled}
+  {readonly}
+  {oninput}
+  {onchange}
+  {onkeydown}
+/>
+
+<style>
+  .input {
+    width: 100%;
+    border: 1px solid #e2e2e2;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    color: #333;
+    background: white;
+    transition: border-color 0.1s;
+  }
+
+  .input::placeholder {
+    color: #a1a1aa;
+  }
+
+  .input:focus {
+    outline: none;
+    border-color: #18181b;
+  }
+
+  .input:disabled {
+    background: #fafafa;
+    color: #a1a1aa;
+    cursor: not-allowed;
+  }
+
+  .input:read-only {
+    background: #fafafa;
+  }
+
+  .input-sm {
+    height: 24px;
+    padding: 0 8px;
+  }
+
+  .input-md {
+    height: 28px;
+    padding: 0 10px;
+  }
+
+  .mono {
+    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+    font-size: 11px;
+  }
+</style>

package/dist/components/Input.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    type?: 'text' | 'password' | 'email' | 'number' | 'search';
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: 'sm' | 'md';
+    mono?: boolean;
+    oninput?: (e: Event) => void;
+    onchange?: (e: Event) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/LangValue.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  interface Props {
+    value: Record<string, string>;
+    display?: 'inline' | 'stacked' | 'primary';
+    primaryLang?: string;
+  }
+
+  let {
+    value,
+    display = 'stacked',
+    primaryLang = 'en'
+  }: Props = $props();
+
+  let langs = $derived(Object.keys(value));
+  let primaryValue = $derived(value[primaryLang] || value[langs[0]] || '');
+  let otherCount = $derived(langs.length - 1);
+</script>
+
+{#if display === 'inline'}
+  <div class="lang-value inline">
+    {#each langs as lang}
+      <span class="entry">
+        <span class="lang">{lang}</span>
+        <span class="text">{value[lang]}</span>
+      </span>
+    {/each}
+  </div>
+{:else if display === 'stacked'}
+  <div class="lang-value stacked">
+    {#each langs as lang}
+      <div class="entry">
+        <span class="lang">{lang}</span>
+        <span class="text">{value[lang]}</span>
+      </div>
+    {/each}
+  </div>
+{:else if display === 'primary'}
+  <div class="lang-value primary">
+    <span class="text">{primaryValue}</span>
+    {#if otherCount > 0}
+      <span class="more" title={langs.filter(l => l !== primaryLang).map(l => `${l}: ${value[l]}`).join('\n')}>
+        +{otherCount}
+      </span>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .lang-value {
+    font-size: 12px;
+  }
+
+  /* Inline display */
+  .lang-value.inline {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .lang-value.inline .entry {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .lang-value.inline .lang {
+    font-size: 9px;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: white;
+    background: #71717a;
+    padding: 1px 4px;
+    border-radius: 2px;
+  }
+
+  .lang-value.inline .text {
+    color: #3f3f46;
+  }
+
+  /* Stacked display */
+  .lang-value.stacked {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .lang-value.stacked .entry {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+  }
+
+  .lang-value.stacked .lang {
+    font-size: 9px;
+    font-weight: 500;
+    text-transform: uppercase;
+    color: #a1a1aa;
+    min-width: 18px;
+  }
+
+  .lang-value.stacked .text {
+    color: #3f3f46;
+  }
+
+  /* Primary display */
+  .lang-value.primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .lang-value.primary .text {
+    color: #3f3f46;
+  }
+
+  .lang-value.primary .more {
+    font-size: 10px;
+    color: #71717a;
+    background: #f4f4f5;
+    padding: 1px 5px;
+    border-radius: 3px;
+    cursor: help;
+  }
+</style>

package/dist/components/LangValue.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    value: Record<string, string>;
+    display?: 'inline' | 'stacked' | 'primary';
+    primaryLang?: string;
+}
+declare const LangValue: import("svelte").Component<Props, {}, "">;
+type LangValue = ReturnType<typeof LangValue>;
+export default LangValue;

package/dist/components/Modal.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  interface Props {
+    open?: boolean;
+    title?: string;
+    onclose?: () => void;
+    children?: import('svelte').Snippet;
+    footer?: import('svelte').Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    title,
+    onclose,
+    children,
+    footer
+  }: Props = $props();
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget) {
+      close();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      close();
+    }
+  }
+
+  function close() {
+    open = false;
+    onclose?.();
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <div class="backdrop" onclick={handleBackdropClick} onkeydown={handleKeydown} role="dialog" aria-modal="true" tabindex="-1">
+    <div class="modal">
+      {#if title}
+        <div class="header">
+          <h2>{title}</h2>
+          <button class="close" onclick={close} aria-label="Close">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      {/if}
+      <div class="content">
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+      {#if footer}
+        <div class="footer">
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .modal {
+    background: white;
+    border-radius: 6px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+    min-width: 320px;
+    max-width: 90vw;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid #e2e2e2;
+  }
+
+  .header h2 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #18181b;
+  }
+
+  .close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: none;
+    color: #71717a;
+    cursor: pointer;
+    border-radius: 4px;
+  }
+
+  .close:hover {
+    background: #f4f4f5;
+    color: #18181b;
+  }
+
+  .content {
+    padding: 16px;
+    overflow-y: auto;
+    font-size: 13px;
+    color: #3f3f46;
+    line-height: 1.5;
+  }
+
+  .footer {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    padding: 12px 16px;
+    border-top: 1px solid #e2e2e2;
+  }
+</style>

package/dist/components/Modal.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    open?: boolean;
+    title?: string;
+    onclose?: () => void;
+    children?: import('svelte').Snippet;
+    footer?: import('svelte').Snippet;
+}
+declare const Modal: import("svelte").Component<Props, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/NumberInput.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    onchange?: (value: number) => void;
+  }
+
+  let {
+    value = $bindable(0),
+    min,
+    max,
+    step = 1,
+    disabled = false,
+    size = 'md',
+    onchange
+  }: Props = $props();
+
+  function increment() {
+    if (disabled) return;
+    const newValue = value + step;
+    if (max !== undefined && newValue > max) return;
+    value = newValue;
+    onchange?.(value);
+  }
+
+  function decrement() {
+    if (disabled) return;
+    const newValue = value - step;
+    if (min !== undefined && newValue < min) return;
+    value = newValue;
+    onchange?.(value);
+  }
+
+  function handleInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const parsed = parseFloat(target.value);
+    if (!isNaN(parsed)) {
+      value = parsed;
+      onchange?.(value);
+    }
+  }
+</script>
+
+<div class="number-input {size}" class:disabled>
+  <button class="btn decrement" onclick={decrement} {disabled} aria-label="Decrease">
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M5 12h14" />
+    </svg>
+  </button>
+  <input
+    type="number"
+    {value}
+    {min}
+    {max}
+    {step}
+    {disabled}
+    oninput={handleInput}
+  />
+  <button class="btn increment" onclick={increment} {disabled} aria-label="Increase">
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+  </button>
+</div>
+
+<style>
+  .number-input {
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid #e4e4e7;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .number-input.sm {
+    height: 28px;
+  }
+
+  .number-input.md {
+    height: 32px;
+  }
+
+  .number-input.disabled {
+    opacity: 0.5;
+  }
+
+  .btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 100%;
+    padding: 0;
+    color: #71717a;
+    background: #fafafa;
+    border: none;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .btn:hover:not(:disabled) {
+    background: #f4f4f5;
+    color: #3f3f46;
+  }
+
+  .btn:disabled {
+    cursor: not-allowed;
+  }
+
+  input {
+    width: 60px;
+    height: 100%;
+    padding: 0 8px;
+    font-size: 12px;
+    font-family: monospace;
+    color: #18181b;
+    text-align: center;
+    background: white;
+    border: none;
+    border-left: 1px solid #e4e4e7;
+    border-right: 1px solid #e4e4e7;
+    outline: none;
+    -moz-appearance: textfield;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input:focus {
+    background: #fafafa;
+  }
+
+  input:disabled {
+    cursor: not-allowed;
+  }
+</style>

package/dist/components/NumberInput.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    onchange?: (value: number) => void;
+}
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;