@sigx/lynx-daisyui 0.4.6 → 0.4.8

package/README.md

@@ -267,6 +267,28 @@ basis: 0` triple, so `flex={1}` actually fills available space instead
 of collapsing to content size — the standard Lynx `flex: 1` shorthand
 expands to `flex: 1 1 auto` which doesn't do what most people expect.
 
+## Markdown integration
+
+Two bridges into [`@sigx/lynx-markdown`](../lynx-markdown):
+
+```tsx
+import { markdownComponents, useMarkdownEditorTheme } from '@sigx/lynx-daisyui';
+
+// Themed rendering: daisyUI typography/colors for every markdown node.
+<MarkdownView value={md} components={markdownComponents} />;
+
+// Themed editing: the native <sigx-richtext> element can't read CSS
+// variables (and the built-in theme tokens are oklch, which Lynx can't
+// parse), so this hook reactively resolves the ACTIVE theme's palette to
+// concrete hex color props — a theme switch recolors the editor live.
+const editorTheme = useMarkdownEditorTheme();
+<MarkdownEditor
+  textColor={editorTheme.textColor}               // base-content
+  accentColor={editorTheme.accentColor}           // primary (caret, links)
+  placeholderColor={editorTheme.placeholderColor} // base-content @ 40%
+/>;
+```
+
 ## Status
 
 Initial release — APIs may shift as the Lynx styling story evolves.

package/dist/index.d.ts

@@ -67,3 +67,5 @@ export type { TextProps, TextSize, TextWeight, TextColor } from './typography/Te
 export { Heading } from './typography/Heading.js';
 export type { HeadingProps, HeadingLevel } from './typography/Heading.js';
 export { markdownComponents } from './markdown/components.js';
+export { useMarkdownEditorTheme } from './markdown/editorTheme.js';
+export type { MarkdownEditorThemeColors } from './markdown/editorTheme.js';

package/dist/index.js

@@ -46,5 +46,7 @@ export { Avatar } from './data/Avatar.js';
 // Typography
 export { Text } from './typography/Text.js';
 export { Heading } from './typography/Heading.js';
-// Markdown — daisyUI rendering for `@sigx/lynx-markdown` (optional peer).
+// Markdown — daisyUI rendering + editor theming for `@sigx/lynx-markdown`
+// (optional peer).
 export { markdownComponents } from './markdown/components.js';
+export { useMarkdownEditorTheme } from './markdown/editorTheme.js';

package/dist/markdown/editorTheme.d.ts

@@ -0,0 +1,34 @@
+/**
+ * daisyUI theming for `@sigx/lynx-markdown`'s `MarkdownEditor`.
+ *
+ * The native `<sigx-richtext>` element can't read CSS custom properties — its
+ * color props need concrete hex values (and the built-in theme tokens are
+ * oklch, which Lynx's CSS engine can't parse anyway). This hook resolves the
+ * **active theme's palette** to the editor's color props, reactively: read the
+ * returned getters inside render and a theme switch recolors the editor.
+ *
+ * ```tsx
+ * const editorTheme = useMarkdownEditorTheme();
+ *
+ * <MarkdownEditor
+ *   textColor={editorTheme.textColor}
+ *   accentColor={editorTheme.accentColor}
+ *   placeholderColor={editorTheme.placeholderColor}
+ *   …
+ * />
+ * ```
+ */
+export interface MarkdownEditorThemeColors {
+    /** `base-content` — the theme's text color. */
+    readonly textColor: string;
+    /** `primary` — caret tint + links. */
+    readonly accentColor: string;
+    /** `base-content` at 40% alpha. */
+    readonly placeholderColor: string;
+}
+/**
+ * Resolve the active daisyUI theme into `MarkdownEditor` color props.
+ * Getters are reactive via the theme controller's `name` — read them in
+ * render (e.g. spread onto the editor's props) to track theme switches.
+ */
+export declare function useMarkdownEditorTheme(): MarkdownEditorThemeColors;

package/dist/markdown/editorTheme.js

@@ -0,0 +1,73 @@
+/**
+ * daisyUI theming for `@sigx/lynx-markdown`'s `MarkdownEditor`.
+ *
+ * The native `<sigx-richtext>` element can't read CSS custom properties — its
+ * color props need concrete hex values (and the built-in theme tokens are
+ * oklch, which Lynx's CSS engine can't parse anyway). This hook resolves the
+ * **active theme's palette** to the editor's color props, reactively: read the
+ * returned getters inside render and a theme switch recolors the editor.
+ *
+ * ```tsx
+ * const editorTheme = useMarkdownEditorTheme();
+ *
+ * <MarkdownEditor
+ *   textColor={editorTheme.textColor}
+ *   accentColor={editorTheme.accentColor}
+ *   placeholderColor={editorTheme.placeholderColor}
+ *   …
+ * />
+ * ```
+ */
+import { useTheme } from '../theme/ThemeProvider.js';
+import { colorsOf } from '../theme/registry.js';
+/**
+ * Resolve the active daisyUI theme into `MarkdownEditor` color props.
+ * Getters are reactive via the theme controller's `name` — read them in
+ * render (e.g. spread onto the editor's props) to track theme switches.
+ */
+export function useMarkdownEditorTheme() {
+    const theme = useTheme();
+    const palette = () => colorsOf(theme.name) ?? colorsOf('daisy-light');
+    return {
+        get textColor() {
+            return toHex(palette()['base-content']);
+        },
+        get accentColor() {
+            return toHex(palette()['primary']);
+        },
+        get placeholderColor() {
+            return withAlpha(toHex(palette()['base-content']), '66'); // ~40%
+        },
+    };
+}
+/**
+ * Normalize a palette color to hex — the registry allows `rgb()`/`rgba()`
+ * entries, but the native `<sigx-richtext>` color parsers are hex-only.
+ */
+function toHex(color) {
+    const c = color.trim();
+    if (c.startsWith('#'))
+        return c;
+    const m = /^rgba?\(\s*(\d+)\s*[, ]\s*(\d+)\s*[, ]\s*(\d+)\s*(?:[,/]\s*([\d.]+%?)\s*)?\)$/i.exec(c);
+    if (!m)
+        return c; // unknown notation — pass through unchanged
+    const byte = (v) => Math.max(0, Math.min(255, Math.round(Number(v)))).toString(16).padStart(2, '0');
+    let hex = `#${byte(m[1])}${byte(m[2])}${byte(m[3])}`;
+    if (m[4] !== undefined) {
+        const a = m[4].endsWith('%') ? Number(m[4].slice(0, -1)) / 100 : Number(m[4]);
+        hex += byte(String(Math.max(0, Math.min(1, a)) * 255));
+    }
+    return hex;
+}
+/** Append an alpha byte to a hex color (`#RGB`/`#RRGGBB` → `#RRGGBBAA`). */
+function withAlpha(hex, alpha) {
+    let h = hex.trim();
+    if (!h.startsWith('#'))
+        return h;
+    h = h.slice(1);
+    if (h.length === 3)
+        h = h.split('').map((c) => c + c).join('');
+    if (h.length === 8)
+        h = h.slice(0, 6);
+    return `#${h}${alpha}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/lynx-daisyui",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "DaisyUI integration for sigx-lynx",
   "type": "module",
   "main": "./dist/index.js",
@@ -37,16 +37,16 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@sigx/lynx-appearance": "^0.4.6",
-    "@sigx/lynx": "^0.4.6",
-    "@sigx/lynx-icons": "^0.4.6",
-    "@sigx/lynx-gestures": "^0.4.6",
-    "@sigx/lynx-motion": "^0.4.6"
+    "@sigx/lynx": "^0.4.8",
+    "@sigx/lynx-gestures": "^0.4.8",
+    "@sigx/lynx-appearance": "^0.4.8",
+    "@sigx/lynx-icons": "^0.4.8",
+    "@sigx/lynx-motion": "^0.4.8"
   },
   "peerDependencies": {
     "tailwindcss": "^3.0.0 || ^4.0.0",
-    "@sigx/lynx-markdown": "^0.4.6",
-    "@sigx/lynx-navigation": "^0.4.6"
+    "@sigx/lynx-markdown": "^0.4.8",
+    "@sigx/lynx-navigation": "^0.4.8"
   },
   "peerDependenciesMeta": {
     "@sigx/lynx-markdown": {
@@ -60,8 +60,8 @@
     "@typescript/native-preview": "7.0.0-dev.20260521.1",
     "tailwindcss": "^4.0.0",
     "typescript": "^6.0.3",
-    "@sigx/lynx-markdown": "^0.4.6",
-    "@sigx/lynx-navigation": "^0.4.6"
+    "@sigx/lynx-navigation": "^0.4.8",
+    "@sigx/lynx-markdown": "^0.4.8"
   },
   "publishConfig": {
     "access": "public"