@xenide-io/the-old-ui-theme 0.9.1 → 0.9.2

package/dist/theme-boot.mjs

@@ -1,7 +1,6 @@
 import {
   suiteThemeBootScript
-} from "./chunk-BS7BZI5W.mjs";
-import "./chunk-IULORI3A.mjs";
+} from "./chunk-VA343JBR.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   suiteThemeBootScript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",
@@ -128,11 +128,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@blocknote/core": "0.52.1",
-    "@blocknote/react": "0.52.1",
     "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-dropdown-menu": "^2.1.24",
     "clsx": "^2.1.1",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.6.0"
   }
 }

package/src/styles/suite-skin.css

@@ -666,28 +666,79 @@ button:hover > .ph-card {
 }
 
 /* ── Ask AI answer content ───────────────────────────────────────────── */
-.suite-ai-blocknote .bn-editor {
-  min-height: 0;
+.suite-ai-markdown {
   padding: 0;
-  background: transparent;
   color: var(--ph-text-primary);
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.5;
   overflow-wrap: anywhere;
 }
-.suite-ai-blocknote .bn-block-content {
-  padding-block: 2px;
-}
-.suite-ai-blocknote [data-content-type="heading"] {
-  padding-top: 8px;
-}
-.suite-ai-blocknote [data-content-type="codeBlock"] {
+.suite-ai-markdown > :first-child {
+  margin-top: 0;
+}
+.suite-ai-markdown > :last-child {
+  margin-bottom: 0;
+}
+.suite-ai-markdown h1,
+.suite-ai-markdown h2,
+.suite-ai-markdown h3,
+.suite-ai-markdown h4 {
+  margin: 0.75rem 0 0.25rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+.suite-ai-markdown h1 { font-size: 1.25rem; }
+.suite-ai-markdown h2 { font-size: 1.125rem; }
+.suite-ai-markdown h3,
+.suite-ai-markdown h4 { font-size: 1rem; }
+.suite-ai-markdown p,
+.suite-ai-markdown ul,
+.suite-ai-markdown ol,
+.suite-ai-markdown blockquote,
+.suite-ai-markdown pre,
+.suite-ai-markdown table {
+  margin: 0.5rem 0;
+}
+.suite-ai-markdown ul,
+.suite-ai-markdown ol {
+  padding-left: 1.25rem;
+}
+.suite-ai-markdown ul { list-style: disc; }
+.suite-ai-markdown ol { list-style: decimal; }
+.suite-ai-markdown li + li { margin-top: 0.125rem; }
+.suite-ai-markdown pre {
+  padding: 0.5rem;
   overflow-x: auto;
   border: 1px solid var(--ph-border);
   border-radius: 6px;
   background: var(--ph-surface);
 }
-.suite-ai-blocknote a {
+.suite-ai-markdown code {
+  font-size: 0.8125rem;
+}
+.suite-ai-markdown :not(pre) > code {
+  padding: 0.1rem 0.25rem;
+  border-radius: 4px;
+  background: var(--ph-surface);
+}
+.suite-ai-markdown blockquote {
+  padding-left: 0.75rem;
+  border-left: 2px solid var(--ph-border);
+}
+.suite-ai-markdown table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+}
+.suite-ai-markdown th,
+.suite-ai-markdown td {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--ph-border);
+  text-align: left;
+}
+.suite-ai-markdown a {
   color: var(--ph-brand);
   text-decoration: underline;
   text-underline-offset: 2px;

package/src/suite/components/{ai-message-blocknote.test.tsx → ai-message-markdown.test.tsx}

@@ -1,7 +1,7 @@
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import SuiteAiBlockNoteMessage from "./ai-message-blocknote";
+import SuiteAiMarkdownMessage from "./ai-message-markdown";
 import { SuiteThemeProvider } from "./theme-provider";
 
 const themeConfig = {
@@ -11,7 +11,7 @@ const themeConfig = {
   fallbackTheme: "light" as const,
 };
 
-describe("SuiteAiBlockNoteMessage", () => {
+describe("SuiteAiMarkdownMessage", () => {
   beforeEach(() => {
     vi.stubGlobal("localStorage", {
       getItem: () => "light",
@@ -23,18 +23,19 @@ describe("SuiteAiBlockNoteMessage", () => {
     vi.unstubAllGlobals();
   });
 
-  it("renders Markdown as restricted read-only BlockNote content", async () => {
+  it("renders safe, semantic Markdown", () => {
     const { container } = render(
       <SuiteThemeProvider config={themeConfig}>
-        <SuiteAiBlockNoteMessage markdown={"## Summary\n\n- First item"} />
+        <SuiteAiMarkdownMessage
+          markdown={"## Summary\n\n- First item\n\n![Ignored](https://example.test/image.png)"}
+        />
       </SuiteThemeProvider>,
     );
 
-    await waitFor(() =>
-      expect(screen.getByText("Summary")).toBeInTheDocument(),
-    );
+    expect(screen.getByRole("heading", { name: "Summary" })).toBeInTheDocument();
     expect(screen.getByText("First item")).toBeInTheDocument();
-    expect(container.querySelector('[contenteditable="false"]')).toBeTruthy();
+    expect(container.querySelector("ul")).toBeTruthy();
+    expect(container.querySelector('[contenteditable]')).toBeNull();
     expect(container.querySelector("img")).toBeNull();
   });
 });

package/src/suite/components/ai-message-markdown.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export default function SuiteAiMarkdownMessage({
+  markdown,
+}: {
+  markdown: string;
+}) {
+  return (
+    <div className="suite-ai-markdown">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{ img: () => null }}
+      >
+        {markdown}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/suite/components/ai-panel.tsx

@@ -28,7 +28,7 @@ import {
   type SuiteAppSlug,
 } from "../lib/apps";
 
-const SuiteAiBlockNoteMessage = lazy(() => import("./ai-message-blocknote"));
+const SuiteAiMarkdownMessage = lazy(() => import("./ai-message-markdown"));
 
 export const SUITE_OPEN_ASK_AI_EVENT = "shellstack:open-ask-ai";
 export const SUITE_ASK_AI_OPEN_KEY = "shellstack:shelly-open";
@@ -542,7 +542,7 @@ export function SuiteAiPanel({
                         </div>
                       }
                     >
-                      <SuiteAiBlockNoteMessage markdown={message.content} />
+                      <SuiteAiMarkdownMessage markdown={message.content} />
                     </Suspense>
                   </div>
                   {(message.actions ?? []).map((action) => (

package/src/suite/components/command-palette-host.tsx

@@ -48,7 +48,7 @@ export function CommandPaletteHost({
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (!((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k")) return;
-      // Leave editors (BlockNote uses Cmd/Ctrl+K for links) alone unless the palette is open.
+      // Leave editable fields alone unless the palette is open.
       if (!open && isEditableTarget()) return;
       e.preventDefault();
       setOpen((o) => !o);

package/src/suite/components/suite-app-layout.tsx

@@ -63,7 +63,7 @@ export function SuiteAppLayout({
         style={{ width: `${sidebarWidth}px` }}
         data-collapsed={collapsed ? "true" : "false"}
       >
-        {/* ponytail: isolate so Ask AI / BlockNote z-index cannot cover the handle */}
+        {/* ponytail: isolate so Ask AI cannot cover the resize handle */}
         <div className="relative z-0 h-full min-h-0 isolate">{sidebar}</div>
         {onStartResize ? (
           <div

package/dist/ai-message-blocknote-D4Z6DUCJ.mjs

@@ -1,69 +0,0 @@
-"use client";
-import {
-  useSuiteTheme
-} from "./chunk-APKRZQRO.mjs";
-import "./chunk-IULORI3A.mjs";
-import "./chunk-FWCSY2DS.mjs";
-
-// src/suite/components/ai-message-blocknote.tsx
-import { useEffect, useLayoutEffect } from "react";
-import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";
-import { BlockNoteViewRaw, useCreateBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
-import { jsx } from "react/jsx-runtime";
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-var assistantSchema = BlockNoteSchema.create({
-  blockSpecs: {
-    paragraph: defaultBlockSpecs.paragraph,
-    heading: defaultBlockSpecs.heading,
-    bulletListItem: defaultBlockSpecs.bulletListItem,
-    numberedListItem: defaultBlockSpecs.numberedListItem,
-    checkListItem: defaultBlockSpecs.checkListItem,
-    codeBlock: defaultBlockSpecs.codeBlock,
-    quote: defaultBlockSpecs.quote,
-    table: defaultBlockSpecs.table,
-    divider: defaultBlockSpecs.divider
-  }
-});
-function SuiteAiBlockNoteMessage({
-  markdown
-}) {
-  const { resolvedTheme } = useSuiteTheme();
-  const editor = useCreateBlockNote({ schema: assistantSchema });
-  useIsomorphicLayoutEffect(() => {
-    try {
-      const blocks = editor.tryParseMarkdownToBlocks(markdown);
-      editor.replaceBlocks(
-        editor.document,
-        blocks.length > 0 ? blocks : [{ type: "paragraph", content: markdown }]
-      );
-    } catch (e) {
-      editor.replaceBlocks(editor.document, [
-        { type: "paragraph", content: markdown }
-      ]);
-    }
-  }, [editor, markdown]);
-  useEffect(() => {
-    const el = editor.domElement;
-    el == null ? void 0 : el.setAttribute("aria-label", "Assistant message");
-  }, [editor]);
-  return /* @__PURE__ */ jsx(
-    BlockNoteViewRaw,
-    {
-      editor,
-      editable: false,
-      theme: resolvedTheme,
-      className: "suite-ai-blocknote",
-      formattingToolbar: false,
-      sideMenu: false,
-      slashMenu: false,
-      linkToolbar: false,
-      filePanel: false,
-      tableHandles: false,
-      comments: false
-    }
-  );
-}
-export {
-  SuiteAiBlockNoteMessage as default
-};

package/dist/chunk-APKRZQRO.mjs

@@ -1,251 +0,0 @@
-import {
-  SUITE_THEME_CHANNEL,
-  SUITE_THEME_COOKIE
-} from "./chunk-IULORI3A.mjs";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-FWCSY2DS.mjs";
-
-// src/suite/components/theme-provider.tsx
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-
-// src/suite/lib/cookies.ts
-function suiteCookieDomainAttr() {
-  var _a;
-  const host = window.location.hostname;
-  if (host === "localhost" || /^\d{1,3}(?:\.\d{1,3}){3}$/.test(host)) {
-    return "";
-  }
-  if (host.endsWith(".localhost")) {
-    return "; Domain=.localhost";
-  }
-  const known = /* @__PURE__ */ new Set([
-    "tides",
-    "kraken",
-    "turtletime",
-    "time",
-    "shelly",
-    "app",
-    "shellstack",
-    "portal"
-  ]);
-  const parts = host.split(".");
-  if (parts.length >= 3 && known.has((_a = parts[0]) != null ? _a : "")) {
-    return `; Domain=.${parts.slice(1).join(".")}`;
-  }
-  if (parts.length >= 2) return `; Domain=.${parts.slice(1).join(".")}`;
-  return "";
-}
-function readCookie(name) {
-  const prefix = `${name}=`;
-  for (const part of document.cookie.split(";")) {
-    const trimmed = part.trim();
-    if (trimmed.startsWith(prefix)) {
-      return decodeURIComponent(trimmed.slice(prefix.length));
-    }
-  }
-  return null;
-}
-function writeCookie(name, value) {
-  const secure = window.location.protocol === "https:" ? "; Secure" : "";
-  document.cookie = `${name}=${encodeURIComponent(value)}; Path=/; Max-Age=31536000; SameSite=Lax${suiteCookieDomainAttr()}${secure}`;
-}
-function clearCookie(name) {
-  const secure = window.location.protocol === "https:" ? "; Secure" : "";
-  document.cookie = `${name}=; Path=/; Max-Age=0; SameSite=Lax${suiteCookieDomainAttr()}${secure}`;
-}
-
-// src/suite/components/theme-provider.tsx
-import { jsx } from "react/jsx-runtime";
-var SuiteThemeContext = createContext(null);
-var suiteThemeChannel = null;
-function broadcastTheme(theme) {
-  if (typeof BroadcastChannel === "undefined") return;
-  try {
-    suiteThemeChannel != null ? suiteThemeChannel : suiteThemeChannel = new BroadcastChannel(SUITE_THEME_CHANNEL);
-    suiteThemeChannel.postMessage(theme);
-  } catch (e) {
-  }
-}
-function readSharedTheme() {
-  if (typeof window === "undefined") return null;
-  try {
-    const value = readCookie(SUITE_THEME_COOKIE);
-    return value === "light" || value === "dark" || value === "system" ? value : null;
-  } catch (e) {
-    return null;
-  }
-}
-function writeSharedTheme(theme) {
-  try {
-    writeCookie(SUITE_THEME_COOKIE, theme);
-  } catch (e) {
-  }
-}
-function systemTheme(fallback) {
-  if (typeof window === "undefined") return fallback;
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function resolveTheme(theme, fallback) {
-  return theme === "system" ? systemTheme(fallback) : theme;
-}
-function applyTheme(theme, config) {
-  const resolved = resolveTheme(theme, config.fallbackTheme);
-  if (typeof document === "undefined") return resolved;
-  document.documentElement.setAttribute(
-    "data-theme",
-    resolved === "dark" ? config.darkThemeId : config.lightThemeId
-  );
-  document.documentElement.classList.toggle("dark", resolved === "dark");
-  if (config.themeColorLight && config.themeColorDark) {
-    const meta = document.getElementById(
-      "theme-color-meta"
-    );
-    if (meta) {
-      meta.content = resolved === "light" ? config.themeColorLight : config.themeColorDark;
-    }
-  }
-  return resolved;
-}
-function readStoredTheme(storageKey) {
-  if (typeof window === "undefined") return "system";
-  const shared = readSharedTheme();
-  if (shared) return shared;
-  try {
-    const stored = localStorage.getItem(storageKey);
-    if (stored === "light" || stored === "dark" || stored === "system")
-      return stored;
-  } catch (e) {
-  }
-  return "system";
-}
-function SuiteThemeProvider({
-  config,
-  children
-}) {
-  const [state, setState] = useState(() => {
-    const theme = readStoredTheme(config.storageKey);
-    if (typeof document === "undefined") {
-      return { theme, resolvedTheme: config.fallbackTheme };
-    }
-    const domTheme = document.documentElement.getAttribute("data-theme");
-    const resolvedTheme = domTheme === config.darkThemeId ? "dark" : domTheme === config.lightThemeId ? "light" : resolveTheme(theme, config.fallbackTheme);
-    return { theme, resolvedTheme };
-  });
-  const themeRef = useRef(state.theme);
-  themeRef.current = state.theme;
-  useEffect(() => {
-    applyTheme(state.theme, config);
-  }, [state.theme, config]);
-  useEffect(() => {
-    if (readSharedTheme() == null) writeSharedTheme(state.theme);
-  }, []);
-  useEffect(() => {
-    if (state.theme !== "system") return;
-    const media = window.matchMedia("(prefers-color-scheme: dark)");
-    const update = () => {
-      const resolved = applyTheme("system", config);
-      setState((current) => __spreadProps(__spreadValues({}, current), { resolvedTheme: resolved }));
-    };
-    media.addEventListener("change", update);
-    return () => media.removeEventListener("change", update);
-  }, [state.theme, config]);
-  useEffect(() => {
-    let channel = null;
-    try {
-      channel = new BroadcastChannel(SUITE_THEME_CHANNEL);
-    } catch (e) {
-      channel = null;
-    }
-    const adopt = (next) => {
-      if (next !== "light" && next !== "dark" && next !== "system") return;
-      if (next === themeRef.current) return;
-      const resolved = applyTheme(next, config);
-      try {
-        localStorage.setItem(config.storageKey, next);
-      } catch (e) {
-      }
-      setState({ theme: next, resolvedTheme: resolved });
-    };
-    const readShared = () => adopt(readSharedTheme());
-    const onChannel = (event) => adopt(event.data);
-    const onStorage = (event) => {
-      if (event.key === config.storageKey) adopt(event.newValue);
-    };
-    let poll = null;
-    const startPolling = () => {
-      if (poll == null) poll = setInterval(readShared, 2e3);
-    };
-    const stopPolling = () => {
-      if (poll != null) {
-        clearInterval(poll);
-        poll = null;
-      }
-    };
-    const onVisibility = () => {
-      if (document.visibilityState === "visible") {
-        readShared();
-        startPolling();
-      } else {
-        stopPolling();
-      }
-    };
-    channel == null ? void 0 : channel.addEventListener("message", onChannel);
-    window.addEventListener("storage", onStorage);
-    window.addEventListener("focus", readShared);
-    document.addEventListener("visibilitychange", onVisibility);
-    if (document.visibilityState === "visible") startPolling();
-    return () => {
-      channel == null ? void 0 : channel.removeEventListener("message", onChannel);
-      channel == null ? void 0 : channel.close();
-      window.removeEventListener("storage", onStorage);
-      window.removeEventListener("focus", readShared);
-      document.removeEventListener("visibilitychange", onVisibility);
-      stopPolling();
-    };
-  }, [config]);
-  const setTheme = useCallback(
-    (next) => {
-      const resolved = applyTheme(next, config);
-      setState({ theme: next, resolvedTheme: resolved });
-      try {
-        localStorage.setItem(config.storageKey, next);
-      } catch (e) {
-      }
-      writeSharedTheme(next);
-      broadcastTheme(next);
-    },
-    [config]
-  );
-  const toggleTheme = useCallback(() => {
-    const next = resolveTheme(themeRef.current, config.fallbackTheme) === "dark" ? "light" : "dark";
-    setTheme(next);
-  }, [config, setTheme]);
-  const value = useMemo(
-    () => ({ theme: state.theme, resolvedTheme: state.resolvedTheme, setTheme, toggleTheme }),
-    [state.theme, state.resolvedTheme, setTheme, toggleTheme]
-  );
-  return /* @__PURE__ */ jsx(SuiteThemeContext.Provider, { value, children });
-}
-function useSuiteTheme() {
-  const ctx = useContext(SuiteThemeContext);
-  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
-  return ctx;
-}
-
-export {
-  readCookie,
-  writeCookie,
-  clearCookie,
-  SuiteThemeProvider,
-  useSuiteTheme
-};

package/dist/chunk-IULORI3A.mjs

@@ -1,8 +0,0 @@
-// src/suite/lib/theme-cookie.ts
-var SUITE_THEME_COOKIE = "xenide-suite-theme";
-var SUITE_THEME_CHANNEL = "xenide-suite-theme";
-
-export {
-  SUITE_THEME_COOKIE,
-  SUITE_THEME_CHANNEL
-};

package/src/suite/components/ai-message-blocknote.tsx

@@ -1,72 +0,0 @@
-"use client";
-
-import { useEffect, useLayoutEffect } from "react";
-import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";
-import { BlockNoteViewRaw, useCreateBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
-
-import { useSuiteTheme } from "./theme-provider";
-
-// Parse the message before first paint so the editor never flashes empty.
-const useIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? useLayoutEffect : useEffect;
-
-const assistantSchema = BlockNoteSchema.create({
-  blockSpecs: {
-    paragraph: defaultBlockSpecs.paragraph,
-    heading: defaultBlockSpecs.heading,
-    bulletListItem: defaultBlockSpecs.bulletListItem,
-    numberedListItem: defaultBlockSpecs.numberedListItem,
-    checkListItem: defaultBlockSpecs.checkListItem,
-    codeBlock: defaultBlockSpecs.codeBlock,
-    quote: defaultBlockSpecs.quote,
-    table: defaultBlockSpecs.table,
-    divider: defaultBlockSpecs.divider,
-  },
-});
-
-export default function SuiteAiBlockNoteMessage({
-  markdown,
-}: {
-  markdown: string;
-}) {
-  const { resolvedTheme } = useSuiteTheme();
-  const editor = useCreateBlockNote({ schema: assistantSchema });
-
-  useIsomorphicLayoutEffect(() => {
-    try {
-      const blocks = editor.tryParseMarkdownToBlocks(markdown);
-      editor.replaceBlocks(
-        editor.document,
-        blocks.length > 0 ? blocks : [{ type: "paragraph", content: markdown }],
-      );
-    } catch {
-      editor.replaceBlocks(editor.document, [
-        { type: "paragraph", content: markdown },
-      ]);
-    }
-  }, [editor, markdown]);
-
-  // BlockNote renders the body as a ProseMirror contenteditable (.tiptap);
-  // give that node an accessible name so axe's aria-input-field-name passes.
-  useEffect(() => {
-    const el = (editor as unknown as { domElement?: HTMLElement }).domElement;
-    el?.setAttribute("aria-label", "Assistant message");
-  }, [editor]);
-
-  return (
-    <BlockNoteViewRaw
-      editor={editor}
-      editable={false}
-      theme={resolvedTheme}
-      className="suite-ai-blocknote"
-      formattingToolbar={false}
-      sideMenu={false}
-      slashMenu={false}
-      linkToolbar={false}
-      filePanel={false}
-      tableHandles={false}
-      comments={false}
-    />
-  );
-}