tosijs-ui 1.6.21 → 1.6.23

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.6.21";
+export declare const version = "1.6.23";

package/dist/version.js

@@ -1 +1 @@
-export const version = '1.6.21';
+export const version = '1.6.23';

package/llms.txt

@@ -1,4 +1,4 @@
-# tosijs-ui v1.6.21
+# tosijs-ui v1.6.23
 
 Simple, robust web-components for use with tosijs or anything else.
 
@@ -10,13 +10,6 @@ Simple, robust web-components for use with tosijs or anything else.
 
 Full documentation, with live code examples, is at the links below.
 
-Live examples run inline on the shared page by default (not sandboxed):
-each has its own `preview` element, but they share one tosijs module, so
-`tosi()` state singletons are shared across every example on a page. This is
-deliberate (it shows tosi isolation and lets you drive demos via the global
-singleton). Namespace example state with unique top-level keys so examples
-don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
-
 ## Pages
 
 - https://ui.tosijs.net/babylon-3d/ — 3d
@@ -30,7 +23,7 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
 - https://ui.tosijs.net/carousel/ — carousel
   This is a minimalist carousel component that supports the usual stuff.
 - https://ui.tosijs.net/code-editor/ — code
-  A [CodeMirror 6](https://codemirror.net/) wrapper.
+  An [ACE Editor](https://ace.c9.io/) wrapper.
 - https://ui.tosijs.net/color-input/ — color input field
   This is a color input field that supports opacity
 - https://ui.tosijs.net/components/ — Components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tosijs-ui",
-  "version": "1.6.21",
+  "version": "1.6.23",
   "description": "simple robust web-components for use with tosijs or anything else",
   "scripts": {
     "start": "bun --watch bin/dev.ts",
@@ -43,7 +43,7 @@
     "playwright": "^1.58.2",
     "prettier": "^2.8.8",
     "tjs-lang": "0.9.0",
-    "tosijs": "^1.6.6",
+    "tosijs": "^1.6.9",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8"
   },
@@ -52,7 +52,7 @@
     "happy-dom": "^20.7.0",
     "marked": "^16.4.2",
     "tjs-lang": "^0.9.0",
-    "tosijs": "^1.6.6"
+    "tosijs": "^1.6.9"
   },
   "peerDependenciesMeta": {
     "@resvg/resvg-js": {
@@ -127,20 +127,5 @@
       "import": "./dist/*.js",
       "default": "./dist/*.js"
     }
-  },
-  "dependencies": {
-    "@codemirror/autocomplete": "^6.20.3",
-    "@codemirror/commands": "^6.10.4",
-    "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/lang-html": "^6.4.11",
-    "@codemirror/lang-javascript": "^6.2.5",
-    "@codemirror/lang-markdown": "^6.5.0",
-    "@codemirror/language": "^6.12.4",
-    "@codemirror/lint": "^6.9.7",
-    "@codemirror/search": "^6.7.1",
-    "@codemirror/state": "^6.7.0",
-    "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.4",
-    "codemirror": "^6.0.2"
   }
 }

package/tls/create-dev-certs.sh

@@ -50,38 +50,22 @@ fi
 # Trust the local CA (idempotent — safe to run every time).
 mkcert -install
 
-# Bonjour/mDNS name of this machine, so the same cert works when another device
-# on the LAN hits https://<name>.local:8787. On macOS the advertised name is the
-# LocalHostName (`scutil --get LocalHostName`), e.g. "Persiflex" → persiflex.local.
-#
-# Hardened: lowercase it (the mDNS convention, and dodges any case-sensitive
-# client), strip a `.local` the source may already carry (no `foo.local.local`),
-# and only add it when we actually have a usable name — so a machine with no
-# LocalHostName never gets a bare ".local" SAN.
+# Bonjour/mDNS name of this machine, so the same cert works when another
+# device on the LAN hits https://<name>.local:8787.
 if [[ "$(uname)" == "Darwin" ]]; then
-  MDNS="$(scutil --get LocalHostName 2>/dev/null || true)"
-  [[ -z "$MDNS" ]] && MDNS="$(hostname -s 2>/dev/null || true)"
+  LOCAL_NAME="$(scutil --get LocalHostName 2>/dev/null || hostname -s).local"
 else
-  MDNS="$(hostname -s 2>/dev/null || true)"
-fi
-MDNS="$(printf '%s' "$MDNS" | tr '[:upper:]' '[:lower:]' | sed -E 's/\.local$//')"
-
-NAMES=(localhost 127.0.0.1 ::1)
-LOCAL_NAME=""
-if [[ -n "$MDNS" && "$MDNS" != "localhost" ]]; then
-  LOCAL_NAME="${MDNS}.local"
-  NAMES+=("$LOCAL_NAME")
+  LOCAL_NAME="$(hostname -s).local"
 fi
 
-mkcert -key-file key.pem -cert-file certificate.pem "${NAMES[@]}"
+mkcert \
+  -key-file key.pem \
+  -cert-file certificate.pem \
+  localhost 127.0.0.1 ::1 "$LOCAL_NAME"
 
 echo
 echo "Wrote tls/key.pem and tls/certificate.pem"
-echo "Valid for: ${NAMES[*]}"
-if [[ -z "$LOCAL_NAME" ]]; then
-  echo "(No Bonjour/.local name detected — set one in System Settings > Sharing"
-  echo " > Local hostname, then re-run to cover https://<name>.local.)"
-fi
+echo "Valid for: localhost, 127.0.0.1, ::1, $LOCAL_NAME"
 echo
 echo "Local browsers: no warnings."
 echo "Other devices (phone, another laptop): copy the CA root to each and trust it —"

package/dist/code-editor-cm.d.ts

@@ -1,48 +0,0 @@
-import { EditorView } from '@codemirror/view';
-import { Extension } from '@codemirror/state';
-/** Map a `<tosi-code mode>` value to a CodeMirror language extension. */
-export declare function languageForMode(mode: string): Extension;
-/** Runtime-introspection hooks for tjs autocomplete (all optional). */
-export interface TjsAutocompleteConfig {
-    getMetadata?: () => Record<string, unknown> | undefined;
-    getImports?: () => Record<string, Record<string, unknown>> | undefined;
-    getLiveBindings?: () => Record<string, unknown> | undefined;
-    getMembers?: (path: string) => Promise<unknown[] | undefined>;
-}
-/**
- * Lazy-load tjs-lang's CodeMirror language + completion bundle. Returns a single
- * CodeMirror `Extension` (tjs language, forbidden-keyword highlighting, theme, and
- * `tjsCompletionSource`-driven autocomplete) suitable for `setLanguageExtension()`,
- * or `null` when tjs-lang (an optional peer) isn't installed or its editor build
- * lacks `tjsEditorExtension`. The dynamic import keeps it out of the bundle until a
- * tjs editor actually mounts.
- */
-export declare function loadTjsExtension(autocomplete?: TjsAutocompleteConfig): Promise<Extension | null>;
-export interface CmHandle {
-    view: EditorView;
-    getValue(): string;
-    setValue(text: string): void;
-    setMode(mode: string): void;
-    /** Swap the language compartment wholesale (e.g. an async-loaded tjs bundle). */
-    setLanguageExtension(ext: Extension): void;
-    setReadOnly(readOnly: boolean): void;
-    undo(): void;
-    redo(): void;
-    canUndo(): boolean;
-    canRedo(): boolean;
-    focus(): void;
-    refresh(): void;
-    destroy(): void;
-}
-export interface CmOptions {
-    value?: string;
-    mode?: string;
-    readOnly?: boolean;
-    /** additional language-adjacent extensions (e.g. a tjs language + autocomplete) */
-    languageExtension?: Extension;
-    onChange?: (value: string) => void;
-    /** style-injection root — pass the host's ShadowRoot when mounted in shadow DOM */
-    root?: Document | ShadowRoot;
-}
-/** Create a CodeMirror editor mounted in `parent`, returning an editor-agnostic handle. */
-export declare function createCmEditor(parent: HTMLElement, opts?: CmOptions): CmHandle;

package/dist/code-editor-cm.js

@@ -1,219 +0,0 @@
-/*
-CodeMirror 6 editor factory — the "heavy" module.
-
-`code-editor.ts` imports this **dynamically** (on first `<tosi-code>` connect), so
-CodeMirror only enters a consumer's bundle as a separate lazy chunk when the editor
-is actually used — mirroring the way the old ACE build loaded from a CDN on first
-use. No `<tosi-code>` in the page → no CodeMirror.
-
-Languages here are the always-available set (js/ts/css/html/markdown). First-class
-tjs (highlighting + runtime-value autocomplete via tjs-lang's editors/codemirror) is
-layered in separately and only when tjs-lang is installed.
-*/
-import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine } from '@codemirror/view';
-import { EditorState, Compartment } from '@codemirror/state';
-import { indentWithTab, history, defaultKeymap, historyKeymap, undo, redo, undoDepth, redoDepth } from '@codemirror/commands';
-import { indentUnit, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching } from '@codemirror/language';
-import { closeBrackets, closeBracketsKeymap, autocompletion, completionKeymap } from '@codemirror/autocomplete';
-import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
-import { lintKeymap } from '@codemirror/lint';
-import { javascript } from '@codemirror/lang-javascript';
-import { css } from '@codemirror/lang-css';
-import { html } from '@codemirror/lang-html';
-import { markdown } from '@codemirror/lang-markdown';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-// The doc-system flips dark mode with a `darkmode` class on <body> (which inverts
-// the luminance of --code-bg / --text-color, so the editor SURFACE adapts for
-// free). Only CM's syntax-token colors need swapping: the light defaultHighlightStyle
-// washes out on a dark surface, so use oneDark's brighter palette in dark mode.
-const isDarkMode = () => typeof document !== 'undefined' &&
-    !!document.body &&
-    document.body.classList.contains('darkmode');
-const highlightFor = (dark) => dark
-    ? syntaxHighlighting(oneDarkHighlightStyle)
-    : syntaxHighlighting(defaultHighlightStyle, { fallback: true });
-const isTjsMode = (mode) => mode === 'tjs' || mode === 'ajs';
-/** Map a `<tosi-code mode>` value to a CodeMirror language extension. */
-export function languageForMode(mode) {
-    switch (mode) {
-        case 'js':
-        case 'javascript':
-            return javascript();
-        case 'ts':
-        case 'typescript':
-        // tjs highlights as TypeScript here (the sync default). First-class tjs — the
-        // tjs-lang language + autocomplete — is layered on asynchronously via
-        // `loadTjsExtension()` + `setLanguageExtension()`, since it lazy-loads the
-        // (optional) tjs-lang editor build; this keeps `mode="tjs"` readable meanwhile.
-        case 'tjs':
-        case 'ajs':
-            return javascript({ typescript: true });
-        case 'css':
-            return css();
-        case 'html':
-            return html();
-        case 'md':
-        case 'markdown':
-            return markdown();
-        default:
-            return javascript();
-    }
-}
-// The language compartment carries the language AND its completion source, so
-// exactly ONE `autocompletion()` is ever active: standard modes use CM's built-in
-// (language-provided) completions here, while the tjs bundle brings its own
-// `autocompletion({ override: [tjsCompletionSource] })`. (This is why the base
-// extension set below does NOT include `autocompletion()`.)
-function standardLanguageBundle(mode) {
-    return [languageForMode(mode), autocompletion()];
-}
-/**
- * Lazy-load tjs-lang's CodeMirror language + completion bundle. Returns a single
- * CodeMirror `Extension` (tjs language, forbidden-keyword highlighting, theme, and
- * `tjsCompletionSource`-driven autocomplete) suitable for `setLanguageExtension()`,
- * or `null` when tjs-lang (an optional peer) isn't installed or its editor build
- * lacks `tjsEditorExtension`. The dynamic import keeps it out of the bundle until a
- * tjs editor actually mounts.
- */
-export async function loadTjsExtension(autocomplete = {}) {
-    try {
-        const mod = (await import('tjs-lang/editors/codemirror'));
-        if (typeof mod.tjsEditorExtension === 'function') {
-            return mod.tjsEditorExtension({ typescript: true, autocomplete });
-        }
-    }
-    catch {
-        // tjs-lang absent or editor build unavailable — caller keeps TS highlighting.
-    }
-    return null;
-}
-// A minimal theme so the editor has a real surface instead of showing whatever is
-// behind it. It's applied as a CodeMirror theme (not shadow-DOM CSS) so it beats
-// CM's injected base styles. Colors come from the doc-system theme vars
-// (`--code-bg` / `--text-color`, which pierce the shadow root and adapt to dark
-// mode) with sensible standalone fallbacks.
-const editorTheme = EditorView.theme({
-    '&': {
-        height: '100%',
-        backgroundColor: 'var(--code-bg, var(--input-bg, #fdfdfd))',
-        color: 'var(--text-color, #222)',
-    },
-    '.cm-scroller': {
-        fontFamily: "Menlo, Monaco, Consolas, 'Courier New', monospace",
-    },
-    '.cm-gutters': {
-        backgroundColor: 'var(--code-bg, var(--input-bg, #fdfdfd))',
-        color: 'var(--text-color, #888)',
-        border: 'none',
-    },
-    '.cm-activeLine': { backgroundColor: 'transparent' },
-    '.cm-activeLineGutter': { backgroundColor: 'transparent' },
-});
-// A basicSetup-equivalent without a hard-coded color theme, so the host page's CSS
-// (and dark mode) controls the palette. Line-wrapping mirrors the old ACE `wrap:true`.
-function baseExtensions() {
-    return [
-        editorTheme,
-        lineNumbers(),
-        highlightActiveLineGutter(),
-        highlightSpecialChars(),
-        history(),
-        foldGutter(),
-        drawSelection(),
-        dropCursor(),
-        EditorState.allowMultipleSelections.of(true),
-        indentOnInput(),
-        indentUnit.of('  '),
-        EditorState.tabSize.of(2),
-        // syntax highlighting is applied per-instance via a compartment (dark-mode aware)
-        bracketMatching(),
-        closeBrackets(),
-        // NB: autocompletion() lives in the language compartment (see
-        // standardLanguageBundle) so tjs's own completion source never doubles up.
-        rectangularSelection(),
-        crosshairCursor(),
-        highlightActiveLine(),
-        highlightSelectionMatches(),
-        EditorView.lineWrapping,
-        keymap.of([
-            indentWithTab,
-            ...closeBracketsKeymap,
-            ...defaultKeymap,
-            ...searchKeymap,
-            ...historyKeymap,
-            ...foldKeymap,
-            ...completionKeymap,
-            ...lintKeymap,
-        ]),
-    ];
-}
-/** Create a CodeMirror editor mounted in `parent`, returning an editor-agnostic handle. */
-export function createCmEditor(parent, opts = {}) {
-    const language = new Compartment();
-    const readonly = new Compartment();
-    const highlight = new Compartment();
-    const langExt = opts.languageExtension ?? standardLanguageBundle(opts.mode ?? 'javascript');
-    const view = new EditorView({
-        parent,
-        root: opts.root,
-        state: EditorState.create({
-            doc: opts.value ?? '',
-            extensions: [
-                baseExtensions(),
-                highlight.of(highlightFor(isDarkMode())),
-                language.of(langExt),
-                readonly.of(EditorState.readOnly.of(!!opts.readOnly)),
-                EditorView.updateListener.of((u) => {
-                    if (u.docChanged && opts.onChange)
-                        opts.onChange(u.state.doc.toString());
-                }),
-            ],
-        }),
-    });
-    // Re-apply the right highlight palette when the doc-system toggles dark mode
-    // (it flips the `darkmode` class on <body>).
-    let dark = isDarkMode();
-    const darkObserver = typeof MutationObserver !== 'undefined' && typeof document !== 'undefined'
-        ? new MutationObserver(() => {
-            const nowDark = isDarkMode();
-            if (nowDark !== dark) {
-                dark = nowDark;
-                view.dispatch({ effects: highlight.reconfigure(highlightFor(dark)) });
-            }
-        })
-        : null;
-    darkObserver?.observe(document.body, { attributes: true, attributeFilter: ['class'] });
-    const handle = {
-        view,
-        getValue: () => view.state.doc.toString(),
-        setValue(text) {
-            if (view.state.doc.toString() === text)
-                return;
-            view.dispatch({
-                changes: { from: 0, to: view.state.doc.length, insert: text },
-            });
-        },
-        setMode(mode) {
-            view.dispatch({ effects: language.reconfigure(standardLanguageBundle(mode)) });
-        },
-        setLanguageExtension(ext) {
-            view.dispatch({ effects: language.reconfigure(ext) });
-        },
-        setReadOnly(ro) {
-            view.dispatch({
-                effects: readonly.reconfigure(EditorState.readOnly.of(ro)),
-            });
-        },
-        undo: () => void undo(view),
-        redo: () => void redo(view),
-        canUndo: () => undoDepth(view.state) > 0,
-        canRedo: () => redoDepth(view.state) > 0,
-        focus: () => view.focus(),
-        refresh: () => view.requestMeasure(),
-        destroy: () => {
-            darkObserver?.disconnect();
-            view.destroy();
-        },
-    };
-    return handle;
-}