@mosetta/ui 0.0.0-stage → 0.0.10

package/src/inline.ts

@@ -0,0 +1,103 @@
+// Inline markup of a single string setting — the one concession composition makes to writing.
+// An article is blocks (Heading, Text, List, Quote); a bold word INSIDE a paragraph is not a
+// block, so a string carries a tiny, dependency-free grammar: **bold**, *italic*, `code`,
+// [label](url). Nothing else: no headings, no images, no HTML — those are blocks or nothing.
+// This module is the PARSER (pure data); the react rendering lives beside the typography.
+
+export type TInlineNode
+  = | { readonly kind: 'text'; readonly text: string }
+  | { readonly kind: 'bold'; readonly children: readonly TInlineNode[] }
+  | { readonly kind: 'italic'; readonly children: readonly TInlineNode[] }
+  | { readonly kind: 'code'; readonly text: string }
+  | { readonly kind: 'link'; readonly href: string; readonly children: readonly TInlineNode[] };
+
+// a link may only lead somewhere a page may lead: web, mail, same-site paths and anchors —
+// never script
+const SAFE_HREF_RE = /^(https?:\/\/|mailto:|\/|#|\.\/|\.\.\/)/i;
+
+/** whether an href is one the renderer will honour (an unsafe one renders as plain text) */
+export const isSafeHref = (href: string): boolean => SAFE_HREF_RE.test(href.trim());
+
+/** a marker that reads as literal text: `\*` `\_` `\[` `` \` `` `\\` */
+const ESCAPABLE = new Set(['*', '_', '[', ']', '`', '\\']);
+
+/**
+ * One recursive descent over the string; `until` is the delimiter that closes the current run
+ * (`**`, `*`, `_`, `]`) — a run that never closes is plain text, exactly as typed.
+ */
+function parseRun(src: string, until: string | null): { nodes: TInlineNode[]; end: number; closed: boolean } {
+  const nodes: TInlineNode[] = [];
+  let text = '';
+  const flush = () => {
+    if (text) nodes.push({ kind: 'text', text });
+    text = '';
+  };
+  let i = 0;
+  while (i < src.length) {
+    const ch = src[i];
+    if (until && src.startsWith(until, i)) {
+      flush();
+      return { nodes, end: i + until.length, closed: true };
+    }
+    if (ch === '\\' && i + 1 < src.length && ESCAPABLE.has(src[i + 1])) {
+      text += src[i + 1];
+      i += 2;
+      continue;
+    }
+    if (ch === '`') {
+      const close = src.indexOf('`', i + 1);
+      if (close > i + 1) {
+        flush();
+        nodes.push({ kind: 'code', text: src.slice(i + 1, close) });
+        i = close + 1;
+        continue;
+      }
+    }
+    if (src.startsWith('**', i) || ch === '*' || ch === '_') {
+      const mark = src.startsWith('**', i) ? '**' : ch;
+      const inner = parseRun(src.slice(i + mark.length), mark);
+      // an empty pair (** **) or an unclosed one is just characters
+      if (inner.closed && inner.nodes.length) {
+        flush();
+        nodes.push({ kind: mark === '**' ? 'bold' : 'italic', children: inner.nodes });
+        i += mark.length + inner.end;
+        continue;
+      }
+    }
+    if (ch === '[') {
+      const label = parseRun(src.slice(i + 1), ']');
+      const afterLabel = i + 1 + label.end;
+      if (label.closed && src[afterLabel] === '(') {
+        const close = src.indexOf(')', afterLabel + 1);
+        if (close > afterLabel + 1) {
+          const href = src.slice(afterLabel + 1, close).trim();
+          flush();
+          nodes.push({ kind: 'link', href, children: label.nodes.length ? label.nodes : [{ kind: 'text', text: href }] });
+          i = close + 1;
+          continue;
+        }
+      }
+    }
+    text += ch;
+    i += 1;
+  }
+  flush();
+  return { nodes, end: src.length, closed: false };
+}
+
+export function parseInline(text: string): TInlineNode[] {
+  return parseRun(text, null).nodes;
+}
+
+/** the markup stripped: what a search index, a title attribute or a translator's segment sees */
+export function plainTextOf(nodes: readonly TInlineNode[]): string {
+  return nodes.map((n) => {
+    switch (n.kind) {
+      case 'text': return n.text;
+      case 'code': return n.text;
+      case 'bold': case 'italic': return plainTextOf(n.children);
+      case 'link': return plainTextOf(n.children);
+      default: return '';
+    }
+  }).join('');
+}

package/src/ui.ts

@@ -0,0 +1,54 @@
+// @mosetta/ui — the shadcn-style base library. Bundled into consumers as a
+// dependency artifact; NO css import here (dependency artifacts carry no css) — a consuming
+// MODULE imports '@mosetta/ui/base.css' + per-component slices ('@mosetta/ui/button.css', ...)
+// — those travel as SHARED dependency-css artifacts, not in the module's scoped css.
+// Styling contract: render inside a `dui-root`-classed element (theme vars + scoped preflight
+// attach there; the generated utilities are `dui:`-prefixed and var-driven).
+export { cn, type ClassValue } from './cn';
+export { variants, type IVariantsConfig, type VariantProps } from './variants';
+export { Button, buttonVariants, type IButtonProps } from './components/button';
+export { Input, type IInputProps } from './components/input';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './components/card';
+export {
+  Heading,
+  Text,
+  List,
+  ListItem,
+  Blockquote,
+  type IHeadingProps,
+  type ITextProps,
+  type IListProps,
+  type IBlockquoteProps,
+} from './components/typography';
+export { Inline } from './components/inline';
+export { InlineField, type IInlineFieldProps } from './components/inlineField';
+export { parseInline, plainTextOf, isSafeHref, type TInlineNode } from './inline';
+export { Stack, stackVariants, type IStackProps } from './components/stack';
+export { editorForm, FormLabel } from './components/form';
+export { Mosaic, type IMosaicProps } from './components/mosaic';
+export { StylerForm, type IStylerFormProps, type IStylerPart } from './components/styler';
+export {
+  serializeArrangement,
+  parseArrangement,
+  COMPONENT_TAB_PREFIX,
+  EMPTY_TAB_PREFIX,
+  type IArrangedTab,
+  type IArrangedGroup,
+  type IArrangedBranch,
+  type TArrangedNode,
+  type IArrangement,
+} from './dockArrangement';
+export {
+  DockLayout,
+  DockTab,
+  DockTabRow,
+  DOCK_LAYOUT_TOKEN,
+  DOCK_TAB_TOKEN,
+  DOCK_TAB_ROW_TOKEN,
+  type IDockComponent,
+  type IDockOpenOptions,
+  type IDockOpenable,
+  type IDockTabInfo,
+  type IDockWant,
+  type TDockSide,
+} from './dockLayout';

package/src/variants.ts

@@ -0,0 +1,28 @@
+// Mini-cva: the shadcn variant convention without the class-variance-authority dependency.
+// A component declares base classes + named variant axes + defaults; the returned builder picks
+// one class set per axis and appends the caller's className last.
+import { cn } from './cn';
+
+type VariantAxes = Record<string, Record<string, string>>;
+
+type VariantProps<V extends VariantAxes> = {
+  [K in keyof V]?: keyof V[K];
+} & { className?: string };
+
+export interface IVariantsConfig<V extends VariantAxes> {
+  readonly base?: string;
+  readonly variants: V;
+  readonly defaultVariants?: { [K in keyof V]?: keyof V[K] };
+}
+
+export function variants<V extends VariantAxes>({ base, variants: axes, defaultVariants }: IVariantsConfig<V>) {
+  return (props?: VariantProps<V>): string => {
+    const picked = Object.keys(axes).map((axis) => {
+      const choice = props?.[axis] ?? defaultVariants?.[axis];
+      return choice != null ? axes[axis][choice as string] : undefined;
+    });
+    return cn(base, ...picked, props?.className);
+  };
+}
+
+export type { VariantProps };

package/styles/theme.css

@@ -0,0 +1,107 @@
+/* @mosetta/ui theme + SCOPED preflight . Everything lives under .dui-root —
+ * NO global selectors: the editor shares one document with the page being edited, and a global
+ * reset would pollute foreign protocol space. Components must render inside a .dui-root element. */
+
+.dui-root {
+  /* shadcn-style palette (light), dui-prefixed vars — the tailwind theme maps color utilities here.
+     Every value comes from the THEME ROLE around the block when there is one (@mosetta/core
+     theme.ts: `--theme-<role>`), and is the kit's own look where there is none — the editor's own
+     UI wears no theme, so it never changes with the page being edited. */
+  --dui-background: var(--theme-background, #ffffff);
+  --dui-foreground: var(--theme-text, #09090b);
+  --dui-card: var(--theme-background, #ffffff);
+  --dui-card-foreground: var(--theme-text, #09090b);
+  --dui-primary: var(--theme-primary, #18181b);
+  --dui-primary-foreground: var(--theme-primary-text, #fafafa);
+  --dui-secondary: var(--theme-muted, #f4f4f5);
+  --dui-secondary-foreground: var(--theme-text, #18181b);
+  --dui-muted: var(--theme-muted, #f4f4f5);
+  --dui-muted-foreground: var(--theme-muted-text, #71717a);
+  --dui-accent: var(--theme-muted, #f4f4f5);
+  --dui-accent-foreground: var(--theme-text, #18181b);
+  --dui-destructive: #dc2626;
+  --dui-destructive-foreground: #fafafa;
+  --dui-border: var(--theme-border, #e4e4e7);
+  --dui-input: var(--theme-border, #e4e4e7);
+  --dui-ring: var(--theme-primary, #18181b);
+  --dui-radius: var(--theme-radius, 0.5rem);
+}
+
+/* The INHERITED defaults, at zero specificity on purpose. A protocol module has no shared
+ * ancestor to put the palette on, so every one of them wears .dui-root ITSELF — and then a rule
+ * here and a utility class on the same element carry the same weight, leaving the winner to
+ * whichever stylesheet the page happened to load last. That is how a dark button ended up with
+ * dark text. `:where` takes this rule out of the contest: it is what applies when nothing else
+ * says otherwise, which is all a default should ever be. */
+:where(.dui-root) {
+  color: var(--dui-foreground);
+  font-family: var(--theme-font-body, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* headings take the theme's heading font — on a block that IS a heading and on one inside a block;
+ * zero weight like every default here */
+:where(.dui-root):where(h1, h2, h3, h4, h5, h6),
+:where(.dui-root) :where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--theme-font-heading, inherit);
+}
+
+/* The mini-preflight: the subset of tailwind's reset our primitives rely on, and the SAME rule as
+ * above applies to it — a reset is a default, and a default must never outweigh a utility. Written
+ * with an ancestor class it would carry MORE weight than the utilities it is meant to yield to:
+ * `.dui-root h2 { font-size: inherit }` beats `.dui:text-3xl`, and a heading inside a card would
+ * quietly lose its size. `:where` keeps the whole layer at zero. */
+:where(.dui-root) *,
+:where(.dui-root) ::before,
+:where(.dui-root) ::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--dui-border);
+  margin: 0;
+  padding: 0;
+}
+
+:where(.dui-root) :where(h1, h2, h3, h4, p) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+:where(.dui-root) :where(button, input, select, textarea) {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+}
+
+:where(.dui-root) :where(button) {
+  appearance: none;
+}
+
+/* The native select arrow sits wherever the browser draws it — flush against the right border,
+ * and no padding moves it. The arrow is ours instead: an inset chevron that the control's own
+ * right padding (editorForm.select) keeps clear of the text. */
+:where(.dui-root) :where(select) {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem 1rem;
+}
+
+:where(.dui-root) :where(img, svg) {
+  display: block;
+  max-width: 100%;
+}
+
+:where(.dui-root) :where(a) {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/* a link inside text takes the theme's accent; with no theme around, the colour of its text — LAST
+ * on purpose: it weighs as little as the reset of every anchor above, so it must come after it */
+:where(.dui-root) :where(a.dui-inline-link) {
+  color: var(--theme-accent, currentColor);
+}

package/styles/tw.css

@@ -0,0 +1,36 @@
+/* Tailwind v4 entry for the OFFLINE css build (scripts/buildCss.mjs — the engine never enters the
+ * CLI module pipeline). Theme tokens + utilities, `dui` prefix; preflight is NOT
+ * imported — our theme.css ships its own scoped mini-reset, and buildCss rescopes the token
+ * :root/:host blocks under .dui-root. */
+@import 'tailwindcss/theme.css' prefix(dui);
+@import 'tailwindcss/utilities.css' prefix(dui) source(none);
+
+/* scan the library sources for dui:* classes (consumers' extra looks go into their *.styles.css) */
+@source '../src';
+
+/* shadcn semantic colors → our .dui-root-scoped vars; `inline` collapses the indirection so
+ * utilities reference var(--dui-*) directly */
+@theme inline {
+  --color-background: var(--dui-background);
+  --color-foreground: var(--dui-foreground);
+  --color-card: var(--dui-card);
+  --color-card-foreground: var(--dui-card-foreground);
+  --color-primary: var(--dui-primary);
+  --color-primary-foreground: var(--dui-primary-foreground);
+  --color-secondary: var(--dui-secondary);
+  --color-secondary-foreground: var(--dui-secondary-foreground);
+  --color-muted: var(--dui-muted);
+  --color-muted-foreground: var(--dui-muted-foreground);
+  --color-accent: var(--dui-accent);
+  --color-accent-foreground: var(--dui-accent-foreground);
+  --color-destructive: var(--dui-destructive);
+  --color-destructive-foreground: var(--dui-destructive-foreground);
+  --color-border: var(--dui-border);
+  --color-input: var(--dui-input);
+  --color-ring: var(--dui-ring);
+  /* corners follow the theme's radius: the defaults below are tailwind's own sizes for 0.5rem */
+  --radius-sm: calc(var(--dui-radius) - 4px);
+  --radius-md: calc(var(--dui-radius) - 2px);
+  --radius-lg: var(--dui-radius);
+  --radius-xl: calc(var(--dui-radius) + 4px);
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../core/tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["src"]
+}