@lapismd/design-core 0.1.0

package/src/shared/forms/code-editor/code-editor-language.ts

@@ -0,0 +1,63 @@
+import { java } from "@codemirror/lang-java";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { python } from "@codemirror/lang-python";
+import { StreamLanguage } from "@codemirror/language";
+import { kotlin } from "@codemirror/legacy-modes/mode/clike";
+import type { Extension } from "@codemirror/state";
+import { mermaid } from "codemirror-lang-mermaid";
+
+export const codeEditorLanguageAliases = {
+  javascript: ["js", "javascript", "mjs", "cjs"],
+  jsx: ["jsx"],
+  typescript: ["ts", "typescript"],
+  tsx: ["tsx"],
+  json: ["json"],
+  python: ["python", "py"],
+  java: ["java"],
+  kotlin: ["kotlin", "kt", "kts"],
+  mermaid: ["mermaid"],
+} as const;
+
+export function normalizeCodeEditorLanguage(value: string): string {
+  return value.trim().toLowerCase();
+}
+
+export function createCodeEditorLanguageExtension(language: string): Extension {
+  const normalized = normalizeCodeEditorLanguage(language);
+  if (codeEditorLanguageAliases.mermaid.includes(normalized as "mermaid"))
+    return mermaid();
+  if (codeEditorLanguageAliases.json.includes(normalized as "json"))
+    return json();
+  if (
+    codeEditorLanguageAliases.javascript.includes(
+      normalized as (typeof codeEditorLanguageAliases.javascript)[number],
+    )
+  )
+    return javascript();
+  if (codeEditorLanguageAliases.jsx.includes(normalized as "jsx"))
+    return javascript({ jsx: true });
+  if (
+    codeEditorLanguageAliases.typescript.includes(
+      normalized as (typeof codeEditorLanguageAliases.typescript)[number],
+    )
+  )
+    return javascript({ typescript: true });
+  if (codeEditorLanguageAliases.tsx.includes(normalized as "tsx"))
+    return javascript({ jsx: true, typescript: true });
+  if (
+    codeEditorLanguageAliases.python.includes(
+      normalized as (typeof codeEditorLanguageAliases.python)[number],
+    )
+  )
+    return python();
+  if (codeEditorLanguageAliases.java.includes(normalized as "java"))
+    return java();
+  if (
+    codeEditorLanguageAliases.kotlin.includes(
+      normalized as (typeof codeEditorLanguageAliases.kotlin)[number],
+    )
+  )
+    return StreamLanguage.define(kotlin);
+  return [];
+}

package/src/shared/forms/code-editor/code-editor-syntax.ts

@@ -0,0 +1,25 @@
+import { syntaxTree } from "@codemirror/language";
+import type { EditorState } from "@codemirror/state";
+import type { Diagnostic } from "@codemirror/lint";
+
+/**
+ * Turns parser error nodes into CodeMirror diagnostics without executing code.
+ * The active language parser is supplied by the editor state.
+ */
+export function parserDiagnostics(state: EditorState): Diagnostic[] {
+  const diagnostics: Diagnostic[] = [];
+
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (!node.type.isError) return;
+      diagnostics.push({
+        from: node.from,
+        to: Math.max(node.from + 1, node.to),
+        severity: "error",
+        message: "Syntax error",
+      });
+    },
+  });
+
+  return diagnostics;
+}

package/src/shared/forms/code-editor/index.ts

@@ -0,0 +1 @@
+export { default as CodeEditor } from "./CodeEditor.svelte";

package/src/shared/forms/code-highlighter/CodeHighlighter.css

@@ -0,0 +1,54 @@
+@import "../form.tokens.css";
+
+[data-ui-component="code-highlighter"] {
+  width: 100%;
+}
+
+[data-ui-part="code-highlighter-pre"] {
+  min-width: 100%;
+  margin: 0;
+  border: 1px solid var(--ui-form-border);
+  border-radius: var(--ui-form-radius);
+  background: var(--ui-form-code-background);
+  color: var(--ui-form-foreground);
+  font-family: var(--ui-form-mono, ui-monospace, monospace);
+  font-size: 0.75rem;
+  line-height: 1.625;
+  padding: 0.75rem;
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-comment {
+  color: var(--ui-form-muted);
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-keyword {
+  color: var(--ui-form-code-keyword, #5b21b6);
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-string {
+  color: var(--ui-form-code-string, #92400e);
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-value {
+  color: var(--ui-form-code-value, #0e726a);
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-function {
+  color: var(--ui-form-code-function, #075985);
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-property {
+  color: var(--ui-form-code-property, #1d4ed8);
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-operator {
+  color: var(--ui-form-code-operator, var(--ui-form-foreground));
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-punctuation {
+  color: var(--ui-form-code-punctuation, var(--ui-form-muted));
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-invalid {
+  color: var(--destructive);
+}

package/src/shared/forms/code-highlighter/CodeHighlighter.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import "./CodeHighlighter.css";
+  import type { Parser } from "@lezer/common";
+  import { highlightCode } from "@lezer/highlight";
+  import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
+
+  import { codeHighlighter } from "./code-highlighter";
+
+  type HighlightSegment = {
+    text: string;
+    className: string;
+  };
+
+  let {
+    code,
+    parser,
+    ariaLabel = "Highlighted source",
+  }: {
+    /** The display-ready source text. This component does not edit it. */
+    code: string;
+    /** A Lezer parser for the language represented by `code`. */
+    parser: Parser;
+    /** Labels the read-only source region. The enclosing scroll area is keyboard-reachable. */
+    ariaLabel?: string;
+  } = $props();
+
+  const segments = $derived.by(() => {
+    const next: HighlightSegment[] = [];
+
+    highlightCode(
+      code,
+      parser.parse(code),
+      codeHighlighter,
+      (text, classes) => {
+        next.push({ text, className: classes });
+      },
+      () => {
+        next.push({ text: "\n", className: "" });
+      },
+    );
+
+    return next;
+  });
+</script>
+
+<div data-ui-component="code-highlighter" data-ui-part="code-highlighter">
+  <ScrollArea.Root orientation="horizontal">
+    <pre
+      data-ui-component="code-highlighter"
+      data-ui-part="code-highlighter-pre"
+      class="ui-code-highlighter"
+      role="region"
+      aria-label={ariaLabel}>{#each segments as segment, index (index)}{#if segment.className}<span
+            class={segment.className}>{segment.text}</span
+          >{:else}{segment.text}{/if}{/each}</pre>
+  </ScrollArea.Root>
+</div>

package/src/shared/forms/code-highlighter/code-highlighter.ts

@@ -0,0 +1,36 @@
+import { tagHighlighter, tags } from "@lezer/highlight";
+
+/**
+ * Read-only syntax classes for {@link CodeHighlighter}. Class names are stable
+ * so the rendered source can use the shared `--ui-form-code-*` palette without a
+ * live editor view. Tag mapping mirrors `CodeEditor` highlight coverage.
+ */
+export const codeHighlighter = tagHighlighter([
+  { tag: [tags.comment, tags.meta], class: "ui-form-code-comment" },
+  {
+    tag: [tags.keyword, tags.atom, tags.bool],
+    class: "ui-form-code-keyword",
+  },
+  {
+    tag: [tags.string, tags.regexp, tags.escape, tags.special(tags.string)],
+    class: "ui-form-code-string",
+  },
+  { tag: tags.number, class: "ui-form-code-value" },
+  {
+    tag: [tags.propertyName, tags.definition(tags.propertyName), tags.typeName],
+    class: "ui-form-code-function",
+  },
+  {
+    tag: [
+      tags.link,
+      tags.variableName,
+      tags.local(tags.variableName),
+      tags.special(tags.variableName),
+      tags.definition(tags.variableName),
+    ],
+    class: "ui-form-code-property",
+  },
+  { tag: tags.operator, class: "ui-form-code-operator" },
+  { tag: tags.punctuation, class: "ui-form-code-punctuation" },
+  { tag: tags.invalid, class: "ui-form-code-invalid" },
+]);

package/src/shared/forms/code-highlighter/index.ts

@@ -0,0 +1,2 @@
+export { default as CodeHighlighter } from "./CodeHighlighter.svelte";
+export { codeHighlighter } from "./code-highlighter";

package/src/shared/forms/collapsible-item-list/CollapsibleItemList.css

@@ -0,0 +1,99 @@
+@import "../form.tokens.css";
+
+.cv-form-item-list {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.cv-form-item-list > header {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.75rem;
+  border-bottom: 1px solid var(--ui-form-border);
+  padding: 0 0 0.2rem;
+}
+
+.cv-form-item-list-toggle,
+.cv-form-item-list-add {
+  display: inline-flex;
+  align-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--ui-form-muted);
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+
+.cv-form-item-list-toggle {
+  position: relative;
+  min-width: 0;
+  min-height: 1.5rem;
+  justify-self: stretch;
+  color: var(--ui-form-foreground);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5;
+  text-align: left;
+}
+
+.cv-form-item-list-toggle :global(svg) {
+  position: absolute;
+  top: 50%;
+  left: -1.35rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--ui-form-muted);
+  translate: 0 -50%;
+}
+
+.cv-form-item-list-toggle[aria-expanded="false"] :global(svg) {
+  rotate: -90deg;
+}
+
+.cv-form-item-list > header > small {
+  display: inline-flex;
+  min-width: 1.35rem;
+  height: 1.35rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--ui-form-selection);
+  color: var(--ui-form-accent);
+  font-size: 0.7rem;
+  font-weight: 750;
+}
+
+.cv-form-item-list-add {
+  gap: 0.25rem;
+  width: fit-content;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-top: 0.15rem;
+}
+
+.cv-form-item-list-add :global(svg) {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.cv-form-item-list-toggle:hover,
+.cv-form-item-list-toggle:focus-visible,
+.cv-form-item-list-add:hover,
+.cv-form-item-list-add:focus-visible {
+  color: var(--ui-form-foreground);
+  outline: 0;
+}
+
+.cv-form-item-list-body {
+  display: grid;
+  gap: 0.35rem;
+  padding-left: 1rem;
+}
+
+.cv-form-item-list-content {
+  min-width: 0;
+}

package/src/shared/forms/collapsible-item-list/CollapsibleItemList.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import "./CollapsibleItemList.css";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import PlusIcon from "@lucide/svelte/icons/plus";
+  import type { Snippet } from "svelte";
+
+  let {
+    title,
+    addLabel,
+    count = 0,
+    open = true,
+    onToggle = () => {},
+    onAdd = () => {},
+    children,
+  }: {
+    title: string;
+    addLabel: string;
+    count?: number;
+    open?: boolean;
+    onToggle?: () => void;
+    onAdd?: () => void;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<section
+  class="cv-form-item-list"
+  data-ui-component="collapsible-item-list"
+  data-ui-part="collapsible-item-list"
+>
+  <header>
+    <button
+      type="button"
+      class="cv-form-item-list-toggle"
+      aria-label={open ? `Collapse ${title}` : `Expand ${title}`}
+      aria-expanded={open}
+      onclick={onToggle}
+    >
+      <ChevronDownIcon />
+      <span>{title}</span>
+    </button>
+    <small>{count}</small>
+  </header>
+
+  {#if open}
+    <div class="cv-form-item-list-body">
+      <div class="cv-form-item-list-content">
+        {@render children?.()}
+      </div>
+      <button type="button" class="cv-form-item-list-add" onclick={onAdd}>
+        <PlusIcon />
+        Add {addLabel}
+      </button>
+    </div>
+  {/if}
+</section>

package/src/shared/forms/collapsible-item-list/index.ts

@@ -0,0 +1 @@
+export { default as CollapsibleItemList } from "./CollapsibleItemList.svelte";

package/src/shared/forms/color-picker/ColorPicker.css

@@ -0,0 +1,150 @@
+@import "../form.tokens.css";
+
+.ui-color-picker {
+  display: grid;
+  grid-template-columns: 1.75rem minmax(0, 1fr);
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ui-color-picker__swatch {
+  width: 1.75rem;
+  height: 1.75rem;
+  aspect-ratio: 1;
+  overflow: hidden;
+  appearance: none;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  clip-path: circle(50%);
+  cursor: pointer;
+  padding: 0;
+}
+
+.ui-color-picker__swatch::-webkit-color-swatch-wrapper {
+  border: 0;
+  border-radius: inherit;
+  padding: 0;
+}
+
+.ui-color-picker__swatch::-webkit-color-swatch,
+.ui-color-picker__swatch::-moz-color-swatch {
+  border: 1px solid var(--ui-form-border);
+  border-radius: inherit;
+}
+
+.ui-color-picker__swatch:focus-visible {
+  outline: 2px solid var(--ui-form-accent);
+  outline-offset: 2px;
+}
+
+.ui-color-picker .ui-color-picker__value[data-ui-component="input"] {
+  height: 1.5rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--ui-form-foreground);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.8125rem;
+  padding: 0;
+}
+
+.ui-color-picker
+  .ui-color-picker__value[data-ui-component="input"]:focus-visible {
+  outline: 0;
+  box-shadow: none;
+}
+
+.ui-color-picker[data-invalid] .ui-color-picker__swatch {
+  outline: 1px solid var(--destructive, #dc2626);
+  outline-offset: 1px;
+}
+
+.ui-color-picker__error {
+  grid-column: 1 / -1;
+  margin: 0;
+  color: var(--destructive, #dc2626);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.ui-color-picker__popover-trigger,
+.ui-color-picker__preset {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border: 1px solid var(--ui-form-border);
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+.ui-color-picker__popover-trigger {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.ui-color-picker__popover-trigger > span {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--ui-color-picker-current);
+}
+
+.ui-color-picker__popover-trigger:focus-visible,
+.ui-color-picker__preset:focus-visible {
+  outline: 2px solid var(--ui-form-accent);
+  outline-offset: 2px;
+}
+
+:global(
+    [data-ui-component="popover"][data-ui-part="popover-content"].ui-color-picker__popover-content
+  ) {
+  width: min(14rem, calc(100vw - 1rem));
+  padding: 0.75rem;
+}
+
+.ui-color-picker--popover {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ui-color-picker__presets {
+  display: grid;
+  grid-template-columns: repeat(5, 1.75rem);
+  gap: 0.5rem;
+}
+
+.ui-color-picker__custom {
+  display: grid;
+  grid-template-columns: 1.75rem minmax(0, 1fr);
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.ui-color-picker__preset {
+  width: 1.75rem;
+  height: 1.75rem;
+  background: var(--ui-color-picker-preset);
+}
+
+.ui-color-picker__preset[aria-pressed="true"] {
+  box-shadow:
+    0 0 0 2px var(--ui-form-background),
+    0 0 0 4px var(--ui-form-accent);
+}
+
+.ui-color-picker--popover .ui-color-picker__value[data-ui-component="input"] {
+  height: 2rem;
+  border: 1px solid var(--ui-form-border);
+  border-radius: var(--ui-form-radius);
+  background: var(--ui-form-background);
+  padding-inline: 0.5rem;
+}

package/src/shared/forms/color-picker/ColorPicker.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import "./ColorPicker.css";
+  import { Input } from "../../shadcn/input";
+  import * as Popover from "../../shadcn/popover/index.js";
+  import {
+    colorValueForPicker,
+    formatPickerColor,
+    type ColorPickerFormat,
+  } from "./color-value";
+
+  let {
+    value = "",
+    placeholder = "",
+    ariaLabel = "Color",
+    format = "hex",
+    presentation = "inline",
+    presets = [],
+    error = null,
+    onChange = () => {},
+    onBlur = () => {},
+  }: {
+    value?: string;
+    placeholder?: string;
+    ariaLabel?: string;
+    /** Controls how values chosen through the native swatch are serialized. */
+    format?: ColorPickerFormat;
+    /** `popover` renders one circular trigger with an adjacent palette editor. */
+    presentation?: "inline" | "popover";
+    presets?: readonly string[];
+    error?: string | null;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+  } = $props();
+
+  const pickerValue = $derived(
+    colorValueForPicker(value) ?? colorValueForPicker(placeholder) ?? "#000000",
+  );
+
+  function updateFromPicker(nextValue: string) {
+    onChange(formatPickerColor(nextValue, format));
+  }
+
+  function selectPreset(nextValue: string) {
+    updateFromPicker(colorValueForPicker(nextValue) ?? nextValue);
+  }
+</script>
+
+{#if presentation === "popover"}
+  <Popover.Root>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <button
+          {...props}
+          type="button"
+          class="ui-color-picker__popover-trigger"
+          aria-label={`${ariaLabel} color picker`}
+          data-invalid={error ? "" : undefined}
+          style={`--ui-color-picker-current: ${pickerValue}`}
+        >
+          <span aria-hidden="true"></span>
+        </button>
+      {/snippet}
+    </Popover.Trigger>
+    <Popover.Content
+      class="ui-color-picker__popover-content"
+      aria-label={`${ariaLabel} color palette`}
+      align="start"
+      sideOffset={6}
+      collisionPadding={8}
+    >
+      <div
+        class="ui-color-picker ui-color-picker--popover"
+        data-ui-component="color-picker"
+        data-presentation="popover"
+        data-invalid={error ? "" : undefined}
+      >
+        {#if presets.length}
+          <div
+            class="ui-color-picker__presets"
+            aria-label={`${ariaLabel} presets`}
+          >
+            {#each presets as preset (preset)}
+              <button
+                type="button"
+                class="ui-color-picker__preset"
+                aria-label={`Use ${preset}`}
+                aria-pressed={colorValueForPicker(preset) === pickerValue}
+                style={`--ui-color-picker-preset: ${colorValueForPicker(preset) ?? preset}`}
+                onclick={() => selectPreset(preset)}
+              ></button>
+            {/each}
+          </div>
+        {/if}
+        <div class="ui-color-picker__custom">
+          <input
+            class="ui-color-picker__swatch"
+            type="color"
+            value={pickerValue}
+            aria-label={`${ariaLabel} any color`}
+            aria-invalid={error ? "true" : undefined}
+            oninput={(event) => updateFromPicker(event.currentTarget.value)}
+            onblur={onBlur}
+          />
+          <Input
+            class="ui-color-picker__value"
+            {value}
+            {placeholder}
+            aria-label={`${ariaLabel} color value`}
+            aria-invalid={error ? "true" : undefined}
+            oninput={(event) => onChange(event.currentTarget.value)}
+            onblur={onBlur}
+          />
+        </div>
+        {#if error}
+          <p class="ui-color-picker__error" role="alert">{error}</p>
+        {/if}
+      </div>
+    </Popover.Content>
+  </Popover.Root>
+{:else}
+  <div
+    class="ui-color-picker"
+    data-ui-component="color-picker"
+    data-presentation="inline"
+    data-invalid={error ? "" : undefined}
+  >
+    <input
+      class="ui-color-picker__swatch"
+      type="color"
+      value={pickerValue}
+      aria-label={`${ariaLabel} color picker`}
+      aria-invalid={error ? "true" : undefined}
+      oninput={(event) => updateFromPicker(event.currentTarget.value)}
+      onblur={onBlur}
+    />
+    <Input
+      class="ui-color-picker__value"
+      {value}
+      {placeholder}
+      aria-label={`${ariaLabel} color value`}
+      aria-invalid={error ? "true" : undefined}
+      oninput={(event) => onChange(event.currentTarget.value)}
+      onblur={onBlur}
+    />
+    {#if error}
+      <p class="ui-color-picker__error" role="alert">{error}</p>
+    {/if}
+  </div>
+{/if}