@pihanga2/codemirror 0.0.0-stage → 0.2.7

package/README.md

@@ -1,3 +1,57 @@
-# Temporary Holding Version
+# @pihanga2/codemirror
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Pihanga CodeMirror card — code editor with StreamLanguage plugin extension mechanism
+
+Part of the [pihanga-shadcn](https://github.com/ivcap-works/pihanga-shadcn) card library.
+
+## Installation
+
+```sh
+npm install @pihanga2/codemirror
+```
+
+Peer dependencies (already in your project if you use pihanga-shadcn):
+```sh
+npm install react react-dom @pihanga2/core
+```
+
+The following card-specific packages are installed automatically as dependencies:
+
+  - `@codemirror/language`
+  - `@codemirror/state`
+  - `@uiw/react-codemirror`
+  - `tailwind-merge`
+  - `clsx`
+  - `class-variance-authority`
+
+---
+
+## Tailwind CSS
+
+This package ships TypeScript source with Tailwind utility classes. Add it to
+your Tailwind content scan so the classes are included in your generated CSS.
+
+**Tailwind v4 (`tailwind.css`)**:
+```css
+@source "../../node_modules/@pihanga2/codemirror/dist-lib-codemirror";
+```
+
+**Tailwind v3 (`tailwind.config.js`)**:
+```js
+module.exports = {
+  content: ["./node_modules/@pihanga2/codemirror/dist-lib-codemirror/**/*.{js,jsx}"],
+};
+```
+
+---
+
+## Usage
+
+```ts
+import "@pihanga2/codemirror/cards/codeMirror";
+```
+
+---
+
+- Repository: <https://github.com/ivcap-works/pihanga-shadcn>
+- shadcn registry: <https://ivcap-works.github.io/pihanga-shadcn/r>

package/cards/codeMirror/codeMirror.component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { CodeMirrorCardProps, CodeMirrorCardEvents } from './codeMirror.types';
+export declare const CodeMirrorComponent: (props: PiCardProps<CodeMirrorCardProps, CodeMirrorCardEvents>) => React.ReactNode;

package/cards/codeMirror/codeMirror.component.js

@@ -0,0 +1,41 @@
+import { resolveExtensions as e, resolveStreamParser as t } from "./codeMirror.types.js";
+import { useMemo as n } from "react";
+import r from "@uiw/react-codemirror";
+import { StreamLanguage as i } from "@codemirror/language";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/cards/codeMirror/codeMirror.component.tsx
+var o = (o) => {
+	let { value: s = "", readOnly: c = !1, streamLanguage: l, extensionsKey: u, theme: d = "light", lineNumbers: f = !0, foldGutter: p = !0, dropCursor: m = !0, allowMultipleSelections: h = !0, indentOnInput: g = !0, height: _ = "auto", minHeight: v, maxHeight: y, className: b, cardName: x, _cls: S, onChanged: C } = o, w = n(() => {
+		let n = u ? [...e(u) ?? []] : [];
+		if (l) {
+			let e = t(l);
+			e && n.push(i.define(e));
+		}
+		return n;
+	}, [l, u]), T = n(() => d === "dark" ? "dark" : d === "light" ? "light" : e(d) || (console.warn(`[shad/codeMirror] Unknown theme "${d}". Register it with registerExtensions() or use "light" / "dark". Falling back to "light".`), "light"), [d]);
+	return /* @__PURE__ */ a("div", {
+		className: S("root", b),
+		"data-pihanga": x,
+		children: /* @__PURE__ */ a(r, {
+			value: s,
+			height: _,
+			minHeight: v,
+			maxHeight: y,
+			readOnly: c,
+			theme: T,
+			extensions: w,
+			basicSetup: {
+				lineNumbers: f,
+				foldGutter: p,
+				dropCursor: m,
+				allowMultipleSelections: h,
+				indentOnInput: g
+			},
+			onChange: (e) => C?.({ value: e })
+		})
+	});
+};
+//#endregion
+export { o as CodeMirrorComponent };
+
+//# sourceMappingURL=codeMirror.component.js.map

package/cards/codeMirror/codeMirror.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeMirror.component.js","names":[],"sources":["../../../src/cards/codeMirror/codeMirror.component.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport type {PiCardProps} from \"@pihanga2/core\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport {StreamLanguage} from \"@codemirror/language\";\nimport type {Extension} from \"@codemirror/state\";\n\nimport type {\n  CodeMirrorCardProps,\n  CodeMirrorCardEvents,\n} from \"./codeMirror.types\";\nimport {resolveStreamParser, resolveExtensions} from \"./codeMirror.types\";\n\nexport const CodeMirrorComponent = (\n  props: PiCardProps<CodeMirrorCardProps, CodeMirrorCardEvents>,\n): React.ReactNode => {\n  const {\n    value = \"\",\n    readOnly = false,\n    streamLanguage,\n    extensionsKey,\n    theme = \"light\",\n    lineNumbers = true,\n    foldGutter = true,\n    dropCursor = true,\n    allowMultipleSelections = true,\n    indentOnInput = true,\n    height = \"auto\",\n    minHeight,\n    maxHeight,\n    className,\n    cardName,\n    _cls,\n    onChanged,\n  } = props;\n\n  /**\n   * Build the effective extension list once per unique combination of keys.\n   * Complex values (StreamParser, Extension[]) are looked up from the\n   * module-level registries — never stored in Redux-serialised card props.\n   */\n  const extensions = useMemo<Extension[]>(() => {\n    const ext: Extension[] = extensionsKey\n      ? [...(resolveExtensions(extensionsKey) ?? [])]\n      : [];\n    if (streamLanguage) {\n      const parser = resolveStreamParser(streamLanguage);\n      if (parser) ext.push(StreamLanguage.define(parser));\n    }\n    return ext;\n  }, [streamLanguage, extensionsKey]);\n\n  /**\n   * \"light\" / \"dark\" are built in. Any other value must be a theme bundle\n   * registered with registerExtensions(); the bundle is applied as an\n   * extension and the built-in light theme is suppressed.\n   */\n  const themeProp = useMemo<\n    \"light\" | \"dark\" | \"none\" | Extension | Extension[]\n  >(() => {\n    if (theme === \"dark\") return \"dark\";\n    if (theme === \"light\") return \"light\";\n    const themeExt = resolveExtensions(theme);\n    if (themeExt) return themeExt;\n    console.warn(\n      `[shad/codeMirror] Unknown theme \"${theme}\". Register it with registerExtensions() or use \"light\" / \"dark\". Falling back to \"light\".`,\n    );\n    return \"light\";\n  }, [theme]);\n\n  return (\n    <div className={_cls(\"root\", className)} data-pihanga={cardName}>\n      <CodeMirror\n        value={value}\n        height={height}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        readOnly={readOnly}\n        theme={themeProp}\n        extensions={extensions}\n        basicSetup={{\n          lineNumbers,\n          foldGutter,\n          dropCursor,\n          allowMultipleSelections,\n          indentOnInput,\n        }}\n        onChange={(val: string) => onChanged?.({value: val})}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,WAAQ,IACR,cAAW,IACX,mBACA,kBACA,WAAQ,SACR,iBAAc,IACd,gBAAa,IACb,gBAAa,IACb,6BAA0B,IAC1B,mBAAgB,IAChB,YAAS,QACT,cACA,cACA,cACA,aACA,SACA,iBACE,GAOE,IAAa,QAA2B;EAC5C,IAAM,IAAmB,IACrB,CAAC,GAAI,EAAkB,CAAa,KAAK,CAAC,CAAE,IAC5C,CAAC;EACL,IAAI,GAAgB;GAClB,IAAM,IAAS,EAAoB,CAAc;GACjD,AAAI,KAAQ,EAAI,KAAK,EAAe,OAAO,CAAM,CAAC;EACpD;EACA,OAAO;CACT,GAAG,CAAC,GAAgB,CAAa,CAAC,GAO5B,IAAY,QAGZ,MAAU,SAAe,SACzB,MAAU,UAAgB,UACb,EAAkB,CAC/B,MACJ,QAAQ,KACN,oCAAoC,EAAM,2FAC5C,GACO,UACN,CAAC,CAAK,CAAC;CAEV,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK,QAAQ,CAAS;EAAG,gBAAc;YACrD,kBAAC,GAAD;GACS;GACC;GACG;GACA;GACD;GACV,OAAO;GACK;GACZ,YAAY;IACV;IACA;IACA;IACA;IACA;GACF;GACA,WAAW,MAAgB,IAAY,EAAC,OAAO,EAAG,CAAC;EACpD,CAAA;CACE,CAAA;AAET"}

package/cards/codeMirror/codeMirror.types.d.ts

@@ -0,0 +1,104 @@
+import { Extension } from '@codemirror/state';
+import { StreamParser } from '@codemirror/language';
+export declare const CODE_MIRROR_CARD = "code-mirror";
+export declare const CodeMirror: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<CodeMirrorCardProps, S, CodeMirrorCardEvents>) => import('@pihanga2/core').PiCardDef;
+/** @deprecated Use {@link CodeMirror} instead. */
+export declare const CodeMirrorCard: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<CodeMirrorCardProps, S, CodeMirrorCardEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const CODE_MIRROR_ACTION: {
+    CHANGED: string;
+};
+export declare const onCodeMirrorChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ChangedEvent>) => void;
+/**
+ * Register a StreamParser under a caller-chosen key.
+ * Call this once at app initialisation time, before the card is first rendered.
+ *
+ * @example
+ * import { python } from "@codemirror/legacy-modes/mode/python";
+ * import { registerStreamParser } from "@pihanga2/codemirror/cards/codeMirror";
+ * registerStreamParser("python", python);
+ */
+export declare function registerStreamParser(key: string, parser: StreamParser<unknown>): void;
+/** @internal — used by the component only. */
+export declare function resolveStreamParser(key: string): StreamParser<unknown> | undefined;
+/**
+ * Register a bundle of CodeMirror 6 extensions (themes, linters, keymaps, …)
+ * under a caller-chosen key.
+ * Call this once at app initialisation time, before the card is first rendered.
+ *
+ * @example
+ * import { oneDark } from "@codemirror/theme-one-dark";
+ * import { registerExtensions } from "@pihanga2/codemirror/cards/codeMirror";
+ * registerExtensions("oneDark", [oneDark]);
+ */
+export declare function registerExtensions(key: string, exts: Extension[]): void;
+/** @internal — used by the component only. */
+export declare function resolveExtensions(key: string): Extension[] | undefined;
+export type CodeMirrorCardProps = {
+    /** The code content to display or edit. */
+    value?: string;
+    /** When true the editor is read-only. Default: false. */
+    readOnly?: boolean;
+    /**
+     * Key of a StreamParser previously registered with `registerStreamParser()`.
+     * Props must be JSON-serialisable — pass the string key, not the parser itself.
+     *
+     * @example
+     * import { python } from "@codemirror/legacy-modes/mode/python";
+     * registerStreamParser("python", python);
+     * CodeMirror({ streamLanguage: "python", value: "print('hello')" });
+     */
+    streamLanguage?: string;
+    /**
+     * Key of an Extension bundle previously registered with `registerExtensions()`.
+     * Props must be JSON-serialisable — pass the string key, not the Extension objects.
+     *
+     * @example
+     * import { oneDark } from "@codemirror/theme-one-dark";
+     * registerExtensions("oneDark", [oneDark]);
+     * CodeMirror({ extensionsKey: "oneDark", ... });
+     *
+     * Note: `theme` looks up keys in this same registry, so a bundle registered
+     * here can also be used as a theme.
+     */
+    extensionsKey?: string;
+    /**
+     * CodeMirror editor theme: "light", "dark", or the key of a theme bundle
+     * registered with `registerExtensions()` (e.g. "dracula").  Default: "light".
+     *
+     * @example
+     * import { draculaInit } from "@uiw/codemirror-theme-dracula";
+     * registerExtensions("dracula", [draculaInit()]);
+     * CodeMirror({ theme: "dracula", ... });
+     */
+    theme?: "light" | "dark" | (string & {});
+    /** Show line numbers in the gutter. Default: true. */
+    lineNumbers?: boolean;
+    /** Show the fold gutter (code folding). Default: true. */
+    foldGutter?: boolean;
+    /** Show a drop cursor while dragging text. Default: true. */
+    dropCursor?: boolean;
+    /** Allow multiple selection ranges. Default: true. */
+    allowMultipleSelections?: boolean;
+    /** Re-indent the current line as you type. Default: true. */
+    indentOnInput?: boolean;
+    /**
+     * CSS height of the editor.  Use "auto" to grow with content or a fixed
+     * value such as "400px".  Default: "auto".
+     */
+    height?: string;
+    /** CSS minimum height of the editor, e.g. "120px". */
+    minHeight?: string;
+    /** CSS maximum height of the editor, e.g. "600px". Scrolls beyond this. */
+    maxHeight?: string;
+    /** Additional CSS class applied to the outer wrapper div. */
+    className?: string;
+};
+export type ChangedEvent = {
+    /** The updated editor content after each change. */
+    value: string;
+};
+export type CodeMirrorCardEvents = {
+    onChanged: ChangedEvent;
+};

package/cards/codeMirror/codeMirror.types.js

@@ -0,0 +1,20 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/codeMirror/codeMirror.types.ts
+var r = "code-mirror", i = e(r), a = i, o = n(r, ["changed"]), s = t(o.CHANGED), c = /* @__PURE__ */ new Map();
+function l(e, t) {
+	c.set(e, t);
+}
+function u(e) {
+	return c.get(e);
+}
+var d = /* @__PURE__ */ new Map();
+function f(e, t) {
+	d.set(e, t);
+}
+function p(e) {
+	return d.get(e);
+}
+//#endregion
+export { o as CODE_MIRROR_ACTION, r as CODE_MIRROR_CARD, i as CodeMirror, a as CodeMirrorCard, s as onCodeMirrorChanged, f as registerExtensions, l as registerStreamParser, p as resolveExtensions, u as resolveStreamParser };
+
+//# sourceMappingURL=codeMirror.types.js.map

package/cards/codeMirror/codeMirror.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeMirror.types.js","names":[],"sources":["../../../src/cards/codeMirror/codeMirror.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\nimport type {Extension} from \"@codemirror/state\";\nimport type {StreamParser} from \"@codemirror/language\";\n\nexport const CODE_MIRROR_CARD = \"code-mirror\";\n\nexport const CodeMirror = createCardDeclaration<\n  CodeMirrorCardProps,\n  CodeMirrorCardEvents\n>(CODE_MIRROR_CARD);\n\n/** @deprecated Use {@link CodeMirror} instead. */\nexport const CodeMirrorCard = CodeMirror;\n\nexport const CODE_MIRROR_ACTION = registerActions(CODE_MIRROR_CARD, [\n  \"changed\",\n]);\n\nexport const onCodeMirrorChanged = createOnAction<ChangedEvent>(\n  CODE_MIRROR_ACTION.CHANGED,\n);\n\n// ── StreamParser registry ────────────────────────────────────────────────────\n// Props must only contain JSON-serialisable primitives.  Complex third-party\n// types (StreamParser, Extension) are stored here and referenced by string key.\n\nconst _streamParserRegistry = new Map<string, StreamParser<unknown>>();\n\n/**\n * Register a StreamParser under a caller-chosen key.\n * Call this once at app initialisation time, before the card is first rendered.\n *\n * @example\n * import { python } from \"@codemirror/legacy-modes/mode/python\";\n * import { registerStreamParser } from \"@pihanga2/codemirror/cards/codeMirror\";\n * registerStreamParser(\"python\", python);\n */\nexport function registerStreamParser(\n  key: string,\n  parser: StreamParser<unknown>,\n): void {\n  _streamParserRegistry.set(key, parser);\n}\n\n/** @internal — used by the component only. */\nexport function resolveStreamParser(\n  key: string,\n): StreamParser<unknown> | undefined {\n  return _streamParserRegistry.get(key);\n}\n\n// ── Extension registry ───────────────────────────────────────────────────────\n\nconst _extensionsRegistry = new Map<string, Extension[]>();\n\n/**\n * Register a bundle of CodeMirror 6 extensions (themes, linters, keymaps, …)\n * under a caller-chosen key.\n * Call this once at app initialisation time, before the card is first rendered.\n *\n * @example\n * import { oneDark } from \"@codemirror/theme-one-dark\";\n * import { registerExtensions } from \"@pihanga2/codemirror/cards/codeMirror\";\n * registerExtensions(\"oneDark\", [oneDark]);\n */\nexport function registerExtensions(key: string, exts: Extension[]): void {\n  _extensionsRegistry.set(key, exts);\n}\n\n/** @internal — used by the component only. */\nexport function resolveExtensions(key: string): Extension[] | undefined {\n  return _extensionsRegistry.get(key);\n}\n\n// ── Card Props ───────────────────────────────────────────────────────────────\n\nexport type CodeMirrorCardProps = {\n  /** The code content to display or edit. */\n  value?: string;\n\n  /** When true the editor is read-only. Default: false. */\n  readOnly?: boolean;\n\n  /**\n   * Key of a StreamParser previously registered with `registerStreamParser()`.\n   * Props must be JSON-serialisable — pass the string key, not the parser itself.\n   *\n   * @example\n   * import { python } from \"@codemirror/legacy-modes/mode/python\";\n   * registerStreamParser(\"python\", python);\n   * CodeMirror({ streamLanguage: \"python\", value: \"print('hello')\" });\n   */\n  streamLanguage?: string;\n\n  /**\n   * Key of an Extension bundle previously registered with `registerExtensions()`.\n   * Props must be JSON-serialisable — pass the string key, not the Extension objects.\n   *\n   * @example\n   * import { oneDark } from \"@codemirror/theme-one-dark\";\n   * registerExtensions(\"oneDark\", [oneDark]);\n   * CodeMirror({ extensionsKey: \"oneDark\", ... });\n   *\n   * Note: `theme` looks up keys in this same registry, so a bundle registered\n   * here can also be used as a theme.\n   */\n  extensionsKey?: string;\n\n  /**\n   * CodeMirror editor theme: \"light\", \"dark\", or the key of a theme bundle\n   * registered with `registerExtensions()` (e.g. \"dracula\").  Default: \"light\".\n   *\n   * @example\n   * import { draculaInit } from \"@uiw/codemirror-theme-dracula\";\n   * registerExtensions(\"dracula\", [draculaInit()]);\n   * CodeMirror({ theme: \"dracula\", ... });\n   */\n  theme?: \"light\" | \"dark\" | (string & {});\n\n  /** Show line numbers in the gutter. Default: true. */\n  lineNumbers?: boolean;\n\n  /** Show the fold gutter (code folding). Default: true. */\n  foldGutter?: boolean;\n\n  /** Show a drop cursor while dragging text. Default: true. */\n  dropCursor?: boolean;\n\n  /** Allow multiple selection ranges. Default: true. */\n  allowMultipleSelections?: boolean;\n\n  /** Re-indent the current line as you type. Default: true. */\n  indentOnInput?: boolean;\n\n  /**\n   * CSS height of the editor.  Use \"auto\" to grow with content or a fixed\n   * value such as \"400px\".  Default: \"auto\".\n   */\n  height?: string;\n\n  /** CSS minimum height of the editor, e.g. \"120px\". */\n  minHeight?: string;\n\n  /** CSS maximum height of the editor, e.g. \"600px\". Scrolls beyond this. */\n  maxHeight?: string;\n\n  /** Additional CSS class applied to the outer wrapper div. */\n  className?: string;\n};\n\nexport type ChangedEvent = {\n  /** The updated editor content after each change. */\n  value: string;\n};\n\nexport type CodeMirrorCardEvents = {\n  onChanged: ChangedEvent;\n};\n"],"mappings":";;AAQA,IAAa,IAAmB,eAEnB,IAAa,EAGxB,CAAgB,GAGL,IAAiB,GAEjB,IAAqB,EAAgB,GAAkB,CAClE,SACF,CAAC,GAEY,IAAsB,EACjC,EAAmB,OACrB,GAMM,oBAAwB,IAAI,IAAmC;AAWrE,SAAgB,EACd,GACA,GACM;CACN,EAAsB,IAAI,GAAK,CAAM;AACvC;AAGA,SAAgB,EACd,GACmC;CACnC,OAAO,EAAsB,IAAI,CAAG;AACtC;AAIA,IAAM,oBAAsB,IAAI,IAAyB;AAYzD,SAAgB,EAAmB,GAAa,GAAyB;CACvE,EAAoB,IAAI,GAAK,CAAI;AACnC;AAGA,SAAgB,EAAkB,GAAsC;CACtE,OAAO,EAAoB,IAAI,CAAG;AACpC"}

package/cards/codeMirror/index.d.ts

@@ -0,0 +1 @@
+export * from './codeMirror.types';

package/cards/codeMirror/index.js

@@ -0,0 +1,13 @@
+import { CODE_MIRROR_ACTION as e, CODE_MIRROR_CARD as t, CodeMirror as n, CodeMirrorCard as r, onCodeMirrorChanged as i, registerExtensions as a, registerStreamParser as o, resolveExtensions as s, resolveStreamParser as c } from "./codeMirror.types.js";
+import { CodeMirrorComponent as l } from "./codeMirror.component.js";
+import { actionTypesToEvents as u, registerCardComponent as d } from "@pihanga2/core";
+//#region src/cards/codeMirror/index.ts
+d({
+	name: t,
+	component: l,
+	events: u(e)
+});
+//#endregion
+export { e as CODE_MIRROR_ACTION, t as CODE_MIRROR_CARD, n as CodeMirror, r as CodeMirrorCard, i as onCodeMirrorChanged, a as registerExtensions, o as registerStreamParser, s as resolveExtensions, c as resolveStreamParser };
+
+//# sourceMappingURL=index.js.map

package/cards/codeMirror/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/codeMirror/index.ts"],"sourcesContent":["import {registerCardComponent, actionTypesToEvents} from \"@pihanga2/core\";\n\nimport {CODE_MIRROR_CARD, CODE_MIRROR_ACTION} from \"./codeMirror.types\";\nimport {CodeMirrorComponent} from \"./codeMirror.component\";\n\nexport * from \"./codeMirror.types\";\n\nregisterCardComponent({\n  name: CODE_MIRROR_CARD,\n  component: CodeMirrorComponent,\n  events: actionTypesToEvents(CODE_MIRROR_ACTION),\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAkB;AAChD,CAAC"}

package/components/hooks/use-breakpoint.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+/**
+ * Convert a user-supplied breakpoint selector string into a CSS media-query
+ * string suitable for `window.matchMedia`.
+ *
+ * Supported selector formats
+ * ──────────────────────────
+ *  Named (Tailwind)  │ `sm`  `md`  `lg`  `xl`  `2xl`
+ *  Min-width         │ `640px`   `>=640px`
+ *  Exclusive min     │ `>640px`  (≡ min-width: 641px)
+ *  Max-width         │ `<=1024px`
+ *  Exclusive max     │ `<1024px` (≡ max-width: 1023px)
+ */
+export declare function selectorToMediaQuery(selector: string): string;
+/**
+ * Convert a breakpoint selector string into a predicate that tests a pixel
+ * width directly.  Used by `useContainerBreakpoint` to evaluate the selector
+ * against an element's `contentRect.width` rather than the viewport.
+ *
+ * Returns `() => true` for unrecognised selectors (fail-open).
+ */
+export declare function selectorToWidthTest(selector: string): (width: number) => boolean;
+/**
+ * Returns `true` when the **viewport** matches the given breakpoint selector,
+ * and reactively updates on resize via `window.matchMedia`.
+ *
+ * When `selector` is `undefined` the hook always returns `true` (no restriction).
+ *
+ * @param selector  A breakpoint name (`sm` | `md` | `lg` | `xl` | `2xl`),
+ *                  a pixel expression (`>400px`, `>=640px`, `<768px`,
+ *                  `<=1024px`, `400px`), or `undefined`.
+ */
+export declare function useBreakpoint(selector: string | undefined): boolean;
+/**
+ * Returns `true` when the width of the element referenced by `ref` matches
+ * the given breakpoint selector.  Uses `ResizeObserver` so it reacts to
+ * any layout change — not just window resize.
+ *
+ * When `selector` is `undefined` the hook always returns `true`.
+ *
+ * **Note:** The caller must attach `ref` to a DOM element.  A thin wrapper
+ * `<div ref={ref} style={{ width: "100%" }}>` whose width equals its parent's
+ * content width is the canonical usage pattern, allowing the breakpoint to be
+ * evaluated against the **enclosing container** rather than the viewport.
+ *
+ * @param selector  Same format as {@link useBreakpoint}.
+ * @param ref       A React ref attached to the element whose width is measured.
+ */
+export declare function useContainerBreakpoint(selector: string | undefined, ref: React.RefObject<HTMLElement | null>): boolean;

package/components/hooks/use-is-touch-device.d.ts

@@ -0,0 +1 @@
+export declare function useIsTouchDevice(): boolean;

package/components/theme-provider/index.d.ts

@@ -0,0 +1,4 @@
+export declare const useTheme: () => {
+    theme: import('./theme-provider.types').Theme;
+    setTheme: (theme: import('./theme-provider.types').Theme) => void;
+};

package/components/theme-provider/theme-provider.component.d.ts

@@ -0,0 +1,2 @@
+import { ThemeProviderProps } from './theme-provider.types';
+export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;

package/components/theme-provider/theme-provider.types.d.ts

@@ -0,0 +1,12 @@
+export type Theme = "dark" | "light" | "system";
+export type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+};
+type ThemeProviderState = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+export declare const ThemeProviderContext: import('react').Context<ThemeProviderState>;
+export {};

package/lib/utils.d.ts

@@ -0,0 +1,17 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Returns "#000000" or "#ffffff" for maximum contrast against the given background color (hex or rgb).
+ *
+ * Based on WCAG relative luminance, which models human visual perception:
+ *   L = 0.2126·R + 0.7152·G + 0.0722·B
+ *
+ * The weights reflect how sensitive our eyes are to each channel —
+ * green contributes 71% of perceived brightness, red ~21%, blue only 7%.
+ * This means a vivid red like #c0392b is perceptually *dim* (L≈0.11), so
+ * white text (contrast 8.7:1) beats black text (2.4:1) against it.
+ *
+ * The threshold L > 0.179 is the luminance midpoint where both black and
+ * white achieve ~4.5:1 contrast — the WCAG AA minimum.
+ */
+export declare function contrastColor(bg: string, threshold?: number): "#000000" | "#ffffff";

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "@pihanga2/codemirror",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.7",
+  "description": "Pihanga CodeMirror card — code editor with StreamLanguage plugin extension mechanism",
+  "type": "module",
+  "exports": {
+    "./cards/codeMirror": {
+      "import": "./cards/codeMirror/index.js",
+      "types": "./cards/codeMirror/index.d.ts"
+    }
+  },
+  "sideEffects": [
+    "./cards/codeMirror/index.js"
+  ],
+  "license": "MIT",
+  "homepage": "https://ivcap-works.github.io/pihanga-shadcn",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ivcap-works/pihanga-shadcn.git"
+  },
+  "keywords": [
+    "pihanga",
+    "shadcn",
+    "radix-ui",
+    "react",
+    "ui",
+    "cards",
+    "codemirror"
+  ],
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@pihanga2/core": "^0.3.40"
+  },
+  "dependencies": {
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.1",
+    "@uiw/react-codemirror": "^4.25.11",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.0"
+  }
+}