svelte-comp 1.2.7 → 1.3.5

package/dist/lib/Card.svelte

@@ -53,16 +53,16 @@
   }: Props = $props();
 
   const paddingSizes: Record<SizeKey, string> = {
-    xs: "px-3 py-2",
-    sm: "px-4 py-2",
-    md: "px-5 py-3",
-    lg: "px-6 py-4",
-    xl: "px-7 py-5",
+    xs: "px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[var(--spacing-sm)]",
+    sm: "px-[var(--spacing-md)] py-[var(--spacing-sm)]",
+    md: "px-[calc(var(--spacing-md)+var(--spacing-xs))] py-[calc(var(--spacing-sm)+var(--spacing-xs))]",
+    lg: "px-[calc(var(--spacing-md)+var(--spacing-sm))] py-[var(--spacing-md)]",
+    xl: "px-[calc(var(--spacing-md)+var(--spacing-sm)+var(--spacing-xs))] py-[calc(var(--spacing-md)+var(--spacing-xs))]",
   };
 
   const cardClass = $derived(
     cx(
-      "bg-[var(--color-bg-surface)] border border-[var(--border-color-default)] rounded-xl shadow-sm overflow-hidden",
+      "bg-[var(--color-bg-surface)] border border-[var(--border-color-default)] rounded-[var(--radius-xl)] shadow-[0_1px_2px_var(--shadow-color)] overflow-hidden",
       TEXT[sz],
       "flex flex-col",
       externalClass

package/dist/lib/Carousel.svelte

@@ -34,7 +34,7 @@
    */
   import Card from "./Card.svelte";
   import type { HTMLAttributes } from "svelte/elements";
-  import type { SizeKey, CarouselItem } from "./types";
+  import { TEXT, type SizeKey, type CarouselItem } from "./types";
   import { cx } from "../utils";
 
   type Props = HTMLAttributes<HTMLDivElement> & {
@@ -66,19 +66,19 @@
     "relative w-full overflow-hidden rounded-[var(--radius-lg)] bg-[var(--color-bg-surface)]";
 
   const sizes: Record<SizeKey, string> = {
-    xs: "rounded-[var(--radius-md)] text-sm",
-    sm: "rounded-[var(--radius-md)] text-base",
-    md: "rounded-[var(--radius-lg)] text-lg",
-    lg: "rounded-[var(--radius-lg)] text-xl",
-    xl: "rounded-[var(--radius-xl)] text-2xl",
+    xs: cx("rounded-[var(--radius-md)]", TEXT.xs),
+    sm: cx("rounded-[var(--radius-md)]", TEXT.sm),
+    md: cx("rounded-[var(--radius-lg)]", TEXT.md),
+    lg: cx("rounded-[var(--radius-lg)]", TEXT.lg),
+    xl: cx("rounded-[var(--radius-xl)]", TEXT.xl),
   };
 
   const contentSize: Record<SizeKey, string> = {
-    xs: "p-3 gap-2",
-    sm: "p-4 gap-2.5",
-    md: "p-5 gap-3",
-    lg: "p-6 gap-4",
-    xl: "p-8 gap-5",
+    xs: "p-[calc(var(--spacing-sm)+var(--spacing-xs))] gap-[var(--spacing-sm)]",
+    sm: "p-[var(--spacing-md)] gap-[calc(var(--spacing-sm)+var(--spacing-xs)/2)]",
+    md: "p-[calc(var(--spacing-md)+var(--spacing-xs))] gap-[calc(var(--spacing-sm)+var(--spacing-xs))]",
+    lg: "p-[calc(var(--spacing-md)+var(--spacing-sm))] gap-[var(--spacing-md)]",
+    xl: "p-[var(--spacing-xl)] gap-[calc(var(--spacing-md)+var(--spacing-xs))]",
   };
 
   const arrowSize: Record<SizeKey, string> = {
@@ -123,14 +123,14 @@
   const arrowClass = $derived(
     cx(
       arrowSize[sz],
-      "rounded-full bg-[var(--color-bg-surface)] shadow-lg flex items-center justify-center [color:var(--color-text-default)] hover:bg-[var(--color-bg-hover)] transition-colors focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus:outline-none"
+      "rounded-full bg-[var(--color-bg-surface)] shadow-[0_8px_16px_var(--shadow-color)] flex items-center justify-center [color:var(--color-text-default)] hover:bg-[var(--color-bg-hover)] transition-colors focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus:outline-none"
     )
   );
 
   const dotClass = $derived(
     cx(
       dotSize[sz],
-      "rounded-full transition-all duration-200 focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus:outline-none"
+      "rounded-full transition-all duration-[var(--transition-fast)] focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus:outline-none"
     )
   );
 
@@ -156,7 +156,7 @@
 
   $effect(() => {
     if (autoplay && hasItems && items.length > 1) {
-      autoplayTimer = setInterval(next, interval);
+      autoplayTimer = setInterval(next, Math.max(1000, interval));
     }
     return () => {
       if (autoplayTimer) {
@@ -203,7 +203,7 @@
         {/snippet}
 
         <div
-          class="transition-opacity duration-300 ease-in-out"
+          class="transition-opacity duration-[var(--transition-normal)] ease-in-out"
           class:opacity-100={i === current}
           class:opacity-0={i !== current}
           class:block={i === current}
@@ -275,7 +275,7 @@
   </div>
 
   {#if showDots && hasItems && items.length > 1}
-    <div class="flex justify-center gap-2 p-4">
+    <div class="flex justify-center gap-[var(--spacing-sm)] p-[var(--spacing-md)]">
       {#each items as item, i (item.id ?? i)}
         <button
           type="button"

package/dist/lib/Carousel.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from "svelte/elements";
-import type { SizeKey, CarouselItem } from "./types";
+import { type SizeKey, type CarouselItem } from "./types";
 type Props = HTMLAttributes<HTMLDivElement> & {
     items?: CarouselItem[];
     sz?: SizeKey;

package/dist/lib/CheckBox.svelte

@@ -116,12 +116,12 @@
       ? state === "checked" || state === "mixed"
         ? "var(--border-color-strong)"
         : "var(--border-color-default)"
-      : "white"
+      : "var(--color-text-inverse,#fff)"
   );
 
   const rootClass = $derived(
     cx(
-      "inline-flex items-center cursor-pointer select-none",
+      "inline-flex items-center cursor-pointer select-none [@media(pointer:coarse)]:min-h-11",
       gapBySize[sz],
       externalClass
     )

package/dist/lib/CodeView.svelte

@@ -139,6 +139,7 @@
   });
 
   async function copyToClipboard() {
+    if (typeof navigator === "undefined" || !navigator.clipboard) return;
     await navigator.clipboard.writeText(code);
     copied = true;
     setTimeout(() => (copied = false), 1200);
@@ -155,7 +156,7 @@
   {#if title}
     <div
       class={cx(
-        "px-3 py-1 bg-[var(--color-bg-muted)] font-semibold uppercase flex items-center justify-between",
+            "px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[var(--spacing-xs)] bg-[var(--color-bg-muted)] font-semibold uppercase flex items-center justify-between",
         TEXT[sz]
       )}
     >
@@ -165,7 +166,7 @@
         <button
           onclick={copyToClipboard}
           class={cx(
-            "px-3 py-0.5 text-xs rounded bg-[var(--color-primary)] text-white hover:opacity-[var(--opacity-hover)]",
+            "px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[calc(var(--spacing-xs)/2)] [font-size:var(--text-xs)] rounded-[var(--radius-sm)] bg-[var(--color-primary)] text-[var(--color-text-inverse,#fff)] hover:opacity-[var(--opacity-hover)]",
             "transition focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus:outline-none"
           )}
           class:!bg-green-600={copied}
@@ -187,7 +188,7 @@
       <div
         bind:this={gutterEl}
         class={cx(
-          "select-none px-3 py-[12px] border-r border-[var(--border-color-default)]",
+          "select-none px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[calc(var(--spacing-sm)+var(--spacing-xs))] border-r border-[var(--border-color-default)]",
           "text-[var(--color-text-muted)] text-right overflow-hidden",
           "cv-gutter bg-[var(--color-bg-surface)] tabular-nums h-full min-h-0"
         )}
@@ -232,8 +233,8 @@
 <style>
   .cv-layer {
     position: absolute;
-    padding: 12px;
-    white-space: pre;
+    padding: calc(var(--spacing-sm) + var(--spacing-xs));
+    white-space: var(--code-white-space, pre);
     box-sizing: border-box;
     font: inherit;
     line-height: inherit;

package/dist/lib/ColorPicker.svelte

@@ -28,9 +28,9 @@
    * @note `clearable=false` hides the clear button; when `disabled`, pointer/keyboard handlers are skipped.
    */
   import type { HTMLAttributes } from "svelte/elements";
-  import Button from "./Button.svelte";
-  import { cx } from "../utils";
-  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
+  import Button from "./Button.svelte";
+  import { cx } from "../utils";
+  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
 
   type Props = HTMLAttributes<HTMLDivElement> & {
     value?: string | null;
@@ -53,9 +53,9 @@
     ...rest
   }: Props = $props();
 
-  const langCtx = getLangContext();
-  const langKey = $derived(getLangKey(langCtx));
-  const L = $derived(getComponentText("colorPicker", langKey));
+  const langCtx = getLangContext();
+  const langKey = $derived(getLangKey(langCtx));
+  const L = $derived(getComponentText("colorPicker", langKey));
 
   const labelFinal = $derived(label ?? L.text);
   const placeholderFinal = $derived(placeholder ?? L.placeholder);

package/dist/lib/ContextMenu.svelte

@@ -0,0 +1,328 @@
+<!-- src/lib/ContextMenu.svelte -->
+<script lang="ts">
+  /**
+   * @component ContextMenu
+   * @description Right-click context menu for editor actions.
+   *
+   * @prop onUndo {() => void} - Fired when Undo is selected
+   * @prop onRedo {() => void} - Fired when Redo is selected
+   * @prop onCopy {() => void} - Fired when Copy is selected
+   * @prop onCut {() => void} - Fired when Cut is selected
+   * @prop onPaste {() => void} - Fired when Paste is selected
+   * @prop onDelete {() => void} - Fired when Delete is selected
+   *
+   * @note Call `openAt(event)` to show the menu at the pointer.
+   * @note Uses lang-context for localization.
+   */
+  import {
+    getComponentText,
+    getLangContext,
+    getLangKey,
+  } from "./lang-context";
+
+  interface Props {
+    onUndo?: () => void;
+    onRedo?: () => void;
+    onCopy?: () => void;
+    onCut?: () => void;
+    onPaste?: () => void;
+    onDelete?: () => void;
+  }
+
+  let {
+    onUndo = () => {},
+    onRedo = () => {},
+    onCopy = () => {},
+    onCut = () => {},
+    onPaste = () => {},
+    onDelete = () => {},
+  }: Props = $props();
+  const langCtx = getLangContext();
+  const langKey = $derived(getLangKey(langCtx));
+  const L = $derived(getComponentText("contextMenu", langKey));
+
+  let visible = $state(false);
+  let x = $state(0);
+  let y = $state(0);
+
+  function clampToViewport(): void {
+    requestAnimationFrame(() => {
+      const menu = document.getElementById("ctx-menu");
+      if (!menu) return;
+      const rect = menu.getBoundingClientRect();
+      const pad = 8;
+      let nextX = x;
+      let nextY = y;
+      if (rect.right > window.innerWidth - pad) {
+        nextX = Math.max(
+          pad,
+          x - (rect.right - (window.innerWidth - pad))
+        );
+      }
+      if (rect.bottom > window.innerHeight - pad) {
+        nextY = Math.max(
+          pad,
+          y - (rect.bottom - (window.innerHeight - pad))
+        );
+      }
+      if (nextX !== x) x = nextX;
+      if (nextY !== y) y = nextY;
+    });
+  }
+
+  export function openAt(event: MouseEvent): void {
+    event?.preventDefault?.();
+    const hasClient =
+      Number.isFinite(event?.clientX) && Number.isFinite(event?.clientY);
+    const hasPage =
+      Number.isFinite(event?.pageX) && Number.isFinite(event?.pageY);
+    if (hasClient && (event.clientX !== 0 || event.clientY !== 0)) {
+      x = event.clientX;
+      y = event.clientY;
+    } else if (hasPage) {
+      x = event.pageX - window.scrollX;
+      y = event.pageY - window.scrollY;
+    } else {
+      x = 0;
+      y = 0;
+    }
+    visible = true;
+    clampToViewport();
+  }
+
+  export function close(): void {
+    visible = false;
+  }
+
+  function handleDocClick(e: MouseEvent): void {
+    if (!visible) return;
+    const menu = document.getElementById("ctx-menu");
+    if (!menu) return;
+    if (!menu.contains(e.target as Node)) close();
+  }
+
+  function handleEsc(e: KeyboardEvent): void {
+    if (e.key === "Escape" && visible) close();
+  }
+
+  $effect(() => {
+    document.addEventListener("click", handleDocClick);
+    document.addEventListener("keydown", handleEsc);
+    return () => {
+      document.removeEventListener("click", handleDocClick);
+      document.removeEventListener("keydown", handleEsc);
+    };
+  });
+
+  const doUndo = () => (onUndo(), close());
+  const doRedo = () => (onRedo(), close());
+  const doCopy = () => (onCopy(), close());
+  const doCut = () => (onCut(), close());
+  const doPaste = () => (onPaste(), close());
+  const doDelete = () => (onDelete(), close());
+
+  const menuPanelClass =
+    "fixed bg-[var(--color-bg-surface)] border border-[var(--border-color-default)] rounded-[var(--radius-md)] min-w-[160px] max-w-[260px] py-[var(--spacing-xs)] z-[9999] box-border text-[var(--text-sm)] shadow-[0_2px_4px_var(--shadow-color)] font-[var(--font-sans)] text-[var(--color-text-default)] m-0 scale-90 origin-top-left";
+  const itemClass =
+    "w-full flex items-center justify-between bg-transparent border-0 text-[var(--color-text-default)] px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[var(--spacing-sm)] m-0 font-inherit cursor-pointer rounded-[var(--radius-sm)] whitespace-nowrap leading-[var(--line-height-normal)] gap-[calc(var(--spacing-sm)+var(--spacing-xs))] outline-none shadow-none relative hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-default)] active:bg-[color-mix(in_srgb,var(--color-primary)_12%,var(--color-bg-hover)_88%)] active:text-[var(--color-text-default)] transition-colors duration-[var(--transition-fast)]";
+  const itemContentClass = "flex items-center gap-[calc(var(--spacing-sm)+var(--spacing-xs)/2)]";
+</script>
+
+{#if visible}
+  <div
+    id="ctx-menu"
+    class={menuPanelClass}
+    style="top: {y}px; left: {x}px;"
+    role="menu"
+    tabindex="-1"
+  >
+    <button 
+      class={itemClass}
+      onclick={(e) => {
+        e.stopPropagation();
+        doUndo();
+      }}
+      title={L.hotkeys.undo}
+    >
+      <div class={itemContentClass}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-4 h-4 opacity-80"
+          aria-hidden="true"
+        >
+          <path d="M3 7v6h6" />
+          <path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" />
+        </svg>
+        <span>{L.contextMenu.undo.replace(/↩️\s*/, "")}</span>
+      </div>
+      <span class="text-[var(--color-text-muted)] text-[0.7rem]">{L.hotkeys.undo}</span>
+    </button>
+
+    <button 
+      class={itemClass}
+      onclick={(e) => {
+        e.stopPropagation();
+        doRedo();
+      }}
+      title={L.hotkeys.redo}
+    >
+      <div class={itemContentClass}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-4 h-4 opacity-80"
+          aria-hidden="true"
+        >
+          <path d="M21 7v6h-6" />
+          <path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" />
+        </svg>
+        <span>{L.contextMenu.redo.replace(/↪️\s*/, "")}</span>
+      </div>
+      <span class="text-[var(--color-text-muted)] text-[0.7rem]">{L.hotkeys.redo}</span>
+    </button>
+
+    <button 
+      class={itemClass}
+      onclick={(e) => {
+        e.stopPropagation();
+        doCopy();
+      }}
+      title={L.hotkeys.copy}
+    >
+      <div class={itemContentClass}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-4 h-4 opacity-80"
+          aria-hidden="true"
+        >
+          <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+        </svg>
+        <span>{L.contextMenu.copy.replace(/📑\s*/, "")}</span>
+      </div>
+      <span class="text-[var(--color-text-muted)] text-[0.7rem]">{L.hotkeys.copy}</span>
+    </button>
+
+    <button 
+      class={itemClass}
+      onclick={(e) => {
+        e.stopPropagation();
+        doCut();
+      }}
+      title={L.hotkeys.cut}
+    >
+      <div class={itemContentClass}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-4 h-4 opacity-80"
+          aria-hidden="true"
+        >
+          <circle cx="6" cy="6" r="3" />
+          <path d="M8.12 8.12 12 12" />
+          <path d="M20 4 8.12 15.88" />
+          <circle cx="6" cy="18" r="3" />
+          <path d="M14.8 14.8 20 20" />
+        </svg>
+        <span>{L.contextMenu.cut.replace(/✂️\s*/, "")}</span>
+      </div>
+      <span class="text-[var(--color-text-muted)] text-[0.7rem]">{L.hotkeys.cut}</span>
+    </button>
+
+    <button 
+      class={itemClass}
+      onclick={(e) => {
+        e.stopPropagation();
+        doPaste();
+      }}
+      title={L.hotkeys.paste}
+    >
+      <div class={itemContentClass}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-4 h-4 opacity-80"
+          aria-hidden="true"
+        >
+          <path d="M11 14h10" />
+          <path d="M16 4h2a2 2 0 0 1 2 2v1.344" />
+          <path d="m17 18 4-4-4-4" />
+          <path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113" />
+          <rect x="8" y="2" width="8" height="4" rx="1" />
+        </svg>
+        <span>{L.contextMenu.paste.replace(/📋\s*/, "")}</span>
+      </div>
+      <span class="text-[var(--color-text-muted)] text-[0.7rem]">{L.hotkeys.paste}</span>
+    </button>
+
+    <button 
+      class={itemClass}
+      onclick={(e) => {
+        e.stopPropagation();
+        doDelete();
+      }}
+      title={L.hotkeys.delete}
+    >
+      <div class={itemContentClass}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-4 h-4 opacity-80"
+          aria-hidden="true"
+        >
+          <path d="M10 11v6" />
+          <path d="M14 11v6" />
+          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+          <path d="M3 6h18" />
+          <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+        </svg>
+        <span>{L.contextMenu.delete}</span>
+      </div>
+      <span class="text-[var(--color-text-muted)] text-[0.7rem]">{L.hotkeys.delete}</span>
+    </button>
+  </div>
+{/if}

package/dist/lib/ContextMenu.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    onUndo?: () => void;
+    onRedo?: () => void;
+    onCopy?: () => void;
+    onCut?: () => void;
+    onPaste?: () => void;
+    onDelete?: () => void;
+}
+declare const ContextMenu: import("svelte").Component<Props, {
+    openAt: (event: MouseEvent) => void;
+    close: () => void;
+}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;