@intlayer/design-system 9.4.1 → 9.4.2

package/src/components/MarkdownEditor/markdown-editor.css

@@ -3,14 +3,14 @@
  *
  * Exposed via the `@intlayer/design-system/markdown-editor.css` export and
  * imported only by consumers that actually use the editor (currently the
- * `apps/app` CMS dashboard), rather than from the shared `tailwind.css`
+ * `apps/app` CMS dashboard), rather than from the shared `styles/globals.css`
  * entry — this keeps the ProseMirror specific rules (placeholder, task
  * checkboxes, image placeholder, drag handle) out of every other consumer's
  * CSS bundle.
  */
 
 :root,
-[data-theme="light"] {
+[data-theme='light'] {
   --novel-highlight-default: #ffffff;
   --novel-highlight-purple: #f6f3f8;
   --novel-highlight-red: #fdebeb;
@@ -27,7 +27,7 @@
   --novel-stone-800: rgba(69, 69, 69);
 }
 
-[data-theme="dark"] {
+[data-theme='dark'] {
   --novel-highlight-default: #000000;
   --novel-highlight-purple: #3f2c4b;
   --novel-highlight-red: #5c1a1a;
@@ -132,7 +132,7 @@
 }
 
 .img-placeholder::before {
-  content: "";
+  content: '';
   box-sizing: border-box;
   position: absolute;
   top: 50%;
@@ -152,23 +152,23 @@
 }
 
 /* Task list checkboxes */
-ul[data-type="taskList"] {
+ul[data-type='taskList'] {
   list-style: none;
   padding: 0;
 }
 
-ul[data-type="taskList"] li > label {
+ul[data-type='taskList'] li > label {
   margin-right: 0.2rem;
   user-select: none;
 }
 
 @media screen and (max-width: 768px) {
-  ul[data-type="taskList"] li > label {
+  ul[data-type='taskList'] li > label {
     margin-right: 0.5rem;
   }
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"] {
+ul[data-type='taskList'] li > label input[type='checkbox'] {
   -webkit-appearance: none;
   appearance: none;
   background-color: var(--background);
@@ -184,16 +184,16 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
   place-content: center;
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"]:hover {
+ul[data-type='taskList'] li > label input[type='checkbox']:hover {
   background-color: var(--accent);
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"]:active {
+ul[data-type='taskList'] li > label input[type='checkbox']:active {
   background-color: var(--accent);
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"]::before {
-  content: "";
+ul[data-type='taskList'] li > label input[type='checkbox']::before {
+  content: '';
   width: 0.65em;
   height: 0.65em;
   transform: scale(0);
@@ -203,11 +203,11 @@ ul[data-type="taskList"] li > label input[type="checkbox"]::before {
   clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"]:checked::before {
+ul[data-type='taskList'] li > label input[type='checkbox']:checked::before {
   transform: scale(1);
 }
 
-ul[data-type="taskList"] li[data-checked="true"] > div > p {
+ul[data-type='taskList'] li[data-checked='true'] > div > p {
   color: var(--muted-foreground);
   text-decoration: line-through;
   text-decoration-thickness: 2px;
@@ -260,7 +260,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   }
 }
 
-[data-theme="dark"] .drag-handle {
+[data-theme='dark'] .drag-handle {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(255, 255, 255, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
 }
 
@@ -274,7 +274,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   background-color: var(--muted) !important;
 }
 
-[data-theme="dark"] .ProseMirror pre.shiki span {
+[data-theme='dark'] .ProseMirror pre.shiki span {
   /* biome-ignore lint/complexity/noImportantStyles: override shiki inline token color with the dark-theme variable */
   color: var(--shiki-dark, inherit) !important;
 }

package/styles/globals.css

@@ -0,0 +1,71 @@
+@import 'tailwindcss';
+
+@import 'fonts.css';
+@import 'themes.css';
+
+@plugin "@tailwindcss/aspect-ratio";
+@source "../src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}";
+
+
+@theme {
+	--font-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
+
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+
+	--color-text: var(--foreground);
+	--color-text-opposite: var(--background);
+	--color-foreground-opposite: var(--background);
+	--color-neutral: var(--color-foreground);
+
+	--color-card: var(--card);
+	--color-card-hover: var(--card-hover);
+
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+
+	--color-hypertext: var(--hypertext);
+	--color-hypertext-hover: var(--hypertext-hover);
+	--color-hypertext-active: var(--hypertext-active);
+
+	--color-success: var(--success);
+	--color-warning: var(--warning);
+	--color-error: var(--error);
+
+	--color-neutral: var(--neutral);
+	--color-white: var(--white);
+	--color-black: var(--black);
+
+	--radius-lg: var(--radius);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-sm: calc(var(--radius) - 4px);
+}
+
+html {
+	font-family: var(--font-sans);
+}
+
+body {
+	background: var(--background);
+	color: var(--foreground);
+}
+
+* {
+	border-color: var(--border);
+}

package/dist/esm/components/DictionaryFieldEditor/ContentEditor.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { useGetDictionaries } from '@api/index';\nimport { getContentNodeByKeyPath } from '@intlayer/core/dictionaryManipulator';\nimport {\n  useEditedContent,\n  useEditorLocale,\n  useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary, LocalDictionaryId } from '@intlayer/types/dictionary';\nimport {\n  type FC,\n  useCallback,\n  useDeferredValue,\n  useEffect,\n  useMemo,\n  useState,\n  useTransition,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Container } from '../Container';\nimport { LocaleSwitcherContent } from '../LocaleSwitcherContentDropDown';\nimport { Pagination } from '../Pagination';\nimport { TextEditorContainer } from './ContentEditorView/TextEditor';\nimport { getIsEditableSection } from './getIsEditableSection';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\n\ntype NodeEditorProps = {\n  dictionary: Dictionary;\n};\n\n/** Render a variant (named string or structured object) for display. */\nconst formatVariant = (\n  variant: string | Record<string, string | number> | undefined\n): string =>\n  variant !== null && typeof variant === 'object'\n    ? JSON.stringify(variant)\n    : (variant ?? '');\n\nexport const ContentEditor: FC<NodeEditorProps> = ({ dictionary }) => {\n  const { itemPagination, variantSwitcher } = useIntlayer('content-editor');\n  const { editedContent } = useEditedContent();\n  const {\n    focusedContent,\n    setFocusedContentKeyPath: _setFocusedContentKeyPath,\n  } = useFocusUnmergedDictionary();\n  const [, startTransition] = useTransition();\n  const setFocusedContentKeyPath: typeof _setFocusedContentKeyPath = (\n    keyPath\n  ) => startTransition(() => _setFocusedContentKeyPath(keyPath));\n\n  const [activeDictionary, setActiveDictionary] =\n    useState<Dictionary>(dictionary);\n\n  // Re-sync the locally tracked dictionary whenever the incoming prop changes\n  // identity — not only when its `localId` changes. After a save, the query\n  // refetches and hands back the same `localId` with fresh content; keying the\n  // effect on `localId` alone left `activeDictionary` (the render source) stale\n  // until a full page reload. The prop reference is stable across unrelated\n  // re-renders (query data / store entry), so sibling switches made via\n  // `switchSibling` are preserved.\n  useEffect(() => {\n    setActiveDictionary(dictionary);\n  }, [dictionary]);\n\n  const hasQualifier =\n    dictionary.item !== undefined || dictionary.variant !== undefined;\n\n  const { data: siblingsData } = useGetDictionaries(\n    { keys: [dictionary.key] },\n    { enabled: hasQualifier && !!dictionary.key }\n  );\n\n  const allSiblings = useMemo<Dictionary[]>(\n    () => (siblingsData?.data ?? []) as unknown as Dictionary[],\n    [siblingsData]\n  );\n\n  const itemDicts = useMemo<Dictionary[]>(() => {\n    if (dictionary.item === undefined) return [];\n    return allSiblings\n      .filter((d) => d.item !== undefined)\n      .sort((a, b) => (a.item ?? 0) - (b.item ?? 0));\n  }, [dictionary, allSiblings]);\n\n  const variantDicts = useMemo<Dictionary[]>(() => {\n    if (dictionary.variant === undefined) return [];\n    return allSiblings.filter((d) => d.variant !== undefined);\n  }, [dictionary, allSiblings]);\n\n  const switchSibling = useCallback(\n    (sibling: Dictionary) => {\n      setActiveDictionary(sibling);\n      setFocusedContentKeyPath([]);\n    },\n    [setFocusedContentKeyPath]\n  );\n\n  const { content, key, localId } = activeDictionary;\n  const focusedKeyPath = focusedContent?.keyPath;\n  const section =\n    typeof editedContent?.[localId as LocalDictionaryId]?.content ===\n    'undefined'\n      ? content\n      : editedContent?.[localId as LocalDictionaryId]?.content;\n\n  const currentLocale = useEditorLocale();\n  const focusedSection = getContentNodeByKeyPath(\n    section,\n    focusedKeyPath ?? [],\n    currentLocale\n  );\n\n  const deferredKeyPath = useDeferredValue(focusedKeyPath);\n  const deferredSection = useDeferredValue(focusedSection);\n  const isStale = deferredSection !== focusedSection;\n\n  const isEditableBaseSection = getIsEditableSection(section);\n  const isEditableFocusedSection = getIsEditableSection(deferredSection);\n\n  useEffect(() => {\n    if (typeof focusedSection === 'undefined') {\n      setFocusedContentKeyPath(focusedContent?.keyPath?.slice(0, -1) ?? []);\n    }\n  }, []);\n\n  const currentItemIndex = itemDicts.findIndex(\n    (dictionary) => dictionary.localId === activeDictionary.localId\n  );\n  const currentVariant = activeDictionary.variant;\n\n  return (\n    <div>\n      {/* Qualifier navigation controls */}\n      {hasQualifier && (\n        <div className=\"mb-4 flex flex-wrap items-center gap-4\">\n          {itemDicts.length > 0 && (\n            <div className=\"flex items-center gap-2\">\n              <span className=\"font-medium text-muted text-xs\">\n                {itemPagination.label}\n              </span>\n              <Pagination\n                currentPage={currentItemIndex >= 0 ? currentItemIndex + 1 : 1}\n                totalPages={itemDicts.length}\n                onPageChange={(page) => {\n                  const target = itemDicts[page - 1];\n                  if (target) switchSibling(target);\n                }}\n                size=\"sm\"\n              />\n            </div>\n          )}\n\n          {variantDicts.length > 0 && (\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span className=\"font-medium text-muted text-xs\">\n                {variantSwitcher.label}:\n              </span>\n              {variantDicts.map((sibling) => {\n                const isActive = sibling.localId === activeDictionary.localId;\n                return (\n                  <button\n                    key={sibling.localId}\n                    type=\"button\"\n                    onClick={() => !isActive && switchSibling(sibling)}\n                    className={`rounded-lg px-3 py-1 text-xs transition-colors ${\n                      isActive\n                        ? 'bg-text font-semibold text-text-opposite'\n                        : 'cursor-pointer border border-border hover:bg-text/10'\n                    }`}\n                  >\n                    {formatVariant(sibling.variant)}\n                  </button>\n                );\n              })}\n              {currentVariant !== undefined &&\n                !variantDicts.some((d) => d.localId === dictionary.localId) && (\n                  <span className=\"rounded-lg bg-text px-3 py-1 font-semibold text-text-opposite text-xs\">\n                    {formatVariant(currentVariant)}\n                  </span>\n                )}\n            </div>\n          )}\n        </div>\n      )}\n\n      <div className=\"mb-6 flex items-center justify-between gap-2\">\n        <KeyPathBreadcrumb\n          dictionaryKey={key}\n          keyPath={focusedKeyPath ?? []}\n          onClickKeyPath={setFocusedContentKeyPath}\n        />\n        <div className=\"flex items-center gap-2\">\n          <LocaleSwitcherContent />\n        </div>\n      </div>\n      <div className=\"flex flex-1 gap-2 overflow-visible max-md:flex-col\">\n        {typeof section === 'object' &&\n          section &&\n          !isEditableBaseSection &&\n          Object.keys(section).length > 0 && (\n            <Container\n              border\n              background=\"none\"\n              className=\"top-10 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n              roundedSize=\"2xl\"\n              transparency=\"xs\"\n            >\n              <NavigationViewNode\n                keyPath={[]}\n                section={section}\n                dictionary={activeDictionary}\n              />\n            </Container>\n          )}\n        {(isEditableFocusedSection || (deferredKeyPath ?? []).length > 0) && (\n          <div\n            className={\n              isStale\n                ? 'pointer-events-none flex-1 opacity-50 transition-opacity'\n                : 'flex-1 transition-opacity'\n            }\n          >\n            <TextEditorContainer\n              keyPath={deferredKeyPath ?? []}\n              section={deferredSection}\n              dictionary={activeDictionary}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/types/components/DictionaryFieldEditor/ContentEditor.d.ts

@@ -1,10 +0,0 @@
-import { FC } from "react";
-import { Dictionary } from "@intlayer/types/dictionary";
-//#region src/components/DictionaryFieldEditor/ContentEditor.d.ts
-type NodeEditorProps = {
-  dictionary: Dictionary;
-};
-declare const ContentEditor: FC<NodeEditorProps>;
-//#endregion
-export { ContentEditor };
-//# sourceMappingURL=ContentEditor.d.ts.map

package/dist/types/components/DictionaryFieldEditor/ContentEditor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentEditor.d.ts","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"mappings":";;;KA4BK;EACH,YAAY;;cAWD,eAAe,GAAG"}

package/tailwind.css

@@ -1,269 +0,0 @@
-@import "tailwindcss";
-
-@font-face {
-  font-family: "Geist";
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src:
-    url("/Geist-VariableFont_wght.woff2") format("woff2"),
-    url("/Geist-VariableFont_wght.ttf") format("truetype");
-}
-
-@theme {
-  --font-sans: "Geist", "Inter", sans-serif;
-
-  --color-background: rgba(255, 255, 255);
-  --color-background-opposite: rgba(18, 18, 18);
-
-  --color-text: rgba(18, 18, 18);
-  --color-text-opposite: rgba(255, 255, 255);
-  --color-text-dark: rgba(255, 255, 255);
-  --color-text-light: rgba(18, 18, 18);
-
-  --color-card: rgba(231, 231, 231);
-  --color-card-hover: rgba(231, 231, 231);
-
-  --color-hypertext: var(--color-text);
-  --color-hypertext-hover: rgba(197, 101, 212);
-  --color-hypertext-active: var(--color-text);
-
-  --color-shadow: rgba(18, 18, 18);
-
-  --color-primary: var(--color-text);
-  --color-primary-50: rgba(249, 253, 230);
-  --color-primary-100: rgba(238, 248, 186);
-  --color-primary-200: rgba(226, 243, 143);
-  --color-primary-300: rgba(215, 239, 105);
-  --color-primary-400: var(--color-text);
-  --color-primary-500: rgba(182, 211, 57);
-  --color-primary-600: rgba(153, 177, 48);
-  --color-primary-700: rgba(116, 134, 37);
-  --color-primary-800: rgba(92, 106, 29);
-  --color-primary-900: rgba(67, 77, 21);
-  --color-primary-950: rgba(40, 46, 12);
-
-  --color-secondary: rgba(255, 230, 109);
-  --color-secondary-50: rgba(254, 251, 232);
-  --color-secondary-100: rgba(255, 246, 194);
-  --color-secondary-200: rgba(255, 230, 109);
-  --color-secondary-300: rgba(255, 216, 69);
-  --color-secondary-400: rgba(252, 193, 19);
-  --color-secondary-500: rgba(236, 168, 6);
-  --color-secondary-600: rgba(204, 129, 2);
-  --color-secondary-700: rgba(162, 90, 6);
-  --color-secondary-800: rgba(134, 71, 13);
-  --color-secondary-900: rgba(114, 58, 17);
-  --color-secondary-950: rgba(67, 29, 5);
-
-  --color-neutral: rgba(93, 93, 93);
-  --color-neutral-50: rgba(249, 249, 249);
-  --color-neutral-100: rgba(231, 231, 231);
-  --color-neutral-200: rgba(209, 209, 209);
-  --color-neutral-300: rgba(176, 176, 176);
-  --color-neutral-400: rgba(136, 136, 136);
-  --color-neutral-500: rgba(109, 109, 109);
-  --color-neutral-600: rgba(93, 93, 93);
-  --color-neutral-700: rgba(79, 79, 79);
-  --color-neutral-800: rgba(69, 69, 69);
-  --color-neutral-900: rgba(61, 61, 61);
-  --color-neutral-950: rgba(48, 48, 48);
-
-  --color-success: rgba(0, 204, 102, 1);
-  --color-success-50: rgba(235, 251, 243, 1);
-  --color-success-100: rgba(186, 242, 214, 1);
-  --color-success-200: rgba(121, 232, 180, 1);
-  --color-success-300: rgba(54, 219, 145, 1);
-  --color-success-400: rgba(26, 211, 123, 1);
-  --color-success-500: rgba(0, 184, 92, 1);
-  --color-success-600: rgba(0, 153, 77, 1);
-  --color-success-700: rgba(0, 122, 61, 1);
-  --color-success-800: rgba(0, 92, 46, 1);
-  --color-success-900: rgba(0, 61, 31, 1);
-
-  --color-warning: rgba(214, 153, 66);
-  --color-warning-50: rgba(254, 251, 232);
-  --color-warning-100: rgba(255, 246, 194);
-  --color-warning-200: rgba(255, 230, 109);
-  --color-warning-300: rgba(255, 216, 69);
-  --color-warning-400: rgba(252, 193, 19);
-  --color-warning-500: rgba(236, 168, 6);
-  --color-warning-600: rgba(204, 129, 2);
-  --color-warning-700: rgba(162, 90, 6);
-  --color-warning-800: rgba(134, 71, 13);
-  --color-warning-900: rgba(114, 58, 17);
-
-  --color-error: rgba(181, 24, 13);
-  --color-error-50: rgba(255, 245, 237);
-  --color-error-100: rgba(255, 232, 213);
-  --color-error-200: rgba(254, 206, 170);
-  --color-error-300: rgba(253, 171, 116);
-  --color-error-400: rgba(251, 125, 60);
-  --color-error-500: rgba(249, 90, 22);
-  --color-error-600: rgba(234, 63, 12);
-  --color-error-700: rgba(194, 45, 12);
-  --color-error-800: rgba(154, 37, 18);
-  --color-error-900: rgba(124, 33, 18);
-
-  --color-white: rgba(255, 255, 255);
-
-  --color-black: rgba(0, 0, 0);
-
-  /* Shadcn standard theme variables mapped to the design system */
-  --color-foreground: var(--foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-}
-
-@custom-variant dark (:where([data-theme="dark"], [data-theme="dark"] *) &);
-@custom-variant light (:where([data-theme="light"], [data-theme="light"] *) &);
-
-:root,
-[data-theme="light"] {
-  --font-sans: "Geist", "Inter", sans-serif;
-
-  --color-background: rgba(255, 255, 255);
-  --color-background-opposite: rgba(18, 18, 18);
-
-  --color-text: rgba(18, 18, 18);
-  --color-text-opposite: rgba(255, 255, 255);
-  --color-text-dark: rgba(255, 255, 255);
-  --color-text-light: rgba(18, 18, 18);
-
-  --color-card: rgba(231, 231, 231);
-  --color-card-hover: rgba(231, 231, 231);
-
-  --color-hypertext: var(--color-text);
-  --color-hypertext-hover: rgba(197, 101, 212);
-  --color-hypertext-active: var(--color-text);
-
-  --color-shadow: rgba(18, 18, 18);
-
-  --color-primary: var(--color-text);
-  --color-secondary: rgba(255, 230, 109);
-  --color-neutral: rgba(93, 93, 93);
-
-  --color-success: rgba(0, 204, 102);
-  --color-warning: rgba(214, 153, 66);
-  --color-error: rgba(181, 24, 13);
-
-  --color-white: rgba(255, 255, 255);
-  --color-black: rgba(0, 0, 0);
-
-  /* Shadcn mappings (Light) */
-  --background: var(--color-background);
-  --foreground: var(--color-text);
-  --card: var(--color-card);
-  --card-foreground: var(--color-text);
-  --popover: var(--color-card);
-  --popover-foreground: var(--color-text);
-  --primary: var(--color-text);
-  --primary-foreground: var(--color-background);
-  --secondary: var(--color-secondary);
-  --secondary-foreground: var(--color-text-light);
-  --muted: var(--color-neutral-100);
-  --muted-foreground: var(--color-neutral-600);
-  --accent: var(--color-card);
-  --accent-foreground: var(--color-text);
-  --border: var(--color-neutral-200);
-  --input: var(--color-neutral-200);
-  --ring: var(--color-primary);
-  --radius: 0.5rem;
-
-  /* Monaco theme variables */
-  --monaco-background: var(--color-background);
-  --monaco-foreground: var(--color-text);
-  --monaco-border: var(--color-neutral-200);
-}
-
-[data-theme="dark"] {
-  --font-sans: "Geist", "Inter", sans-serif;
-
-  --color-background: rgba(23, 23, 23);
-  --color-background-opposite: rgba(255, 255, 255);
-
-  --color-text: rgba(255, 245, 237);
-  --color-text-opposite: rgba(18, 18, 18);
-
-  --color-card: rgba(39, 39, 39);
-  --color-card-hover: rgba(79, 79, 79);
-
-  --color-hypertext: var(--color-text);
-  --color-hypertext-hover: rgba(197, 101, 212);
-  --color-hypertext-active: var(--color-text);
-
-  --color-shadow: rgba(18, 18, 18);
-
-  --color-primary: var(--color-text);
-  --color-secondary: rgba(255, 230, 109);
-  --color-neutral: rgba(93, 93, 93);
-
-  --color-success: rgba(0, 204, 102);
-  --color-warning: rgba(214, 153, 66);
-  --color-error: rgba(181, 24, 13);
-
-  --color-white: rgba(255, 255, 255);
-  --color-black: rgba(0, 0, 0);
-
-  /* Shadcn mappings (Dark) */
-  --background: var(--color-background);
-  --foreground: var(--color-text);
-  --card: var(--color-card);
-  --card-foreground: var(--color-text);
-  --popover: var(--color-card);
-  --popover-foreground: var(--color-text);
-  --primary: var(--color-text);
-  --primary-foreground: var(--color-background);
-  --secondary: var(--color-secondary);
-  --secondary-foreground: var(--color-text-light);
-  --muted: rgba(79, 79, 79, 1);
-  --muted-foreground: rgba(176, 176, 176, 1);
-  --accent: var(--color-card);
-  --accent-foreground: var(--color-text);
-  --border: rgba(79, 79, 79, 1);
-  --input: rgba(79, 79, 79, 1);
-  --ring: var(--color-primary);
-
-  /* Monaco theme variables */
-  --monaco-background: var(--color-background);
-  --monaco-foreground: var(--color-text);
-  --monaco-border: rgba(79, 79, 79, 1);
-}
-
-@plugin "@tailwindcss/aspect-ratio";
-
-@source "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}";
-
-/**
- * Dual-theme Shiki output.
- *
- * Code blocks are highlighted once with both `github-light` and `github-dark`,
- * and every token carries its two colours as the `--shiki-light` /
- * `--shiki-dark` custom properties instead of a resolved `color`. One markup
- * therefore serves both themes, which is what allows the highlighting to be
- * done ahead of time — at build, on the server — rather than re-run in the
- * browser whenever the resolved theme changes.
- *
- * These rules live here, rather than in each app's `shiki.css`, because they
- * are what makes the code block components render at all: without them every
- * token resolves to an undefined variable.
- */
-.shiki,
-.shiki span {
-  color: var(--shiki-light);
-}
-
-[data-theme="dark"] .shiki,
-[data-theme="dark"] .shiki span {
-  color: var(--shiki-dark);
-}