@sqlrooms/ui 0.29.0-rc.0 → 0.29.0-rc.2

package/dist/theme/theme-provider.js

@@ -1,10 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useLayoutEffect, useState, } from 'react';
+export const DEFAULT_THEME = 'system';
+export const DEFAULT_THEME_STORAGE_KEY = 'sqlrooms-ui-theme';
 const initialState = {
-    theme: 'system',
+    theme: DEFAULT_THEME,
+    resolvedTheme: getResolvedTheme(DEFAULT_THEME),
     setTheme: () => null,
 };
 const ThemeProviderContext = createContext(initialState);
+function isTheme(value) {
+    return value === 'light' || value === 'dark' || value === 'system';
+}
+/**
+ * Returns the currently stored theme preference without requiring React context.
+ * Falls back to the provided default when storage is unavailable or invalid.
+ */
+export function getThemePreference({ defaultTheme = DEFAULT_THEME, storageKey = DEFAULT_THEME_STORAGE_KEY, } = {}) {
+    if (typeof window === 'undefined')
+        return defaultTheme;
+    try {
+        const storedTheme = window.localStorage.getItem(storageKey);
+        return isTheme(storedTheme) ? storedTheme : defaultTheme;
+    }
+    catch {
+        return defaultTheme;
+    }
+}
+/**
+ * Resolves a theme preference to the concrete light/dark theme currently in use.
+ */
+export function getResolvedTheme(theme) {
+    if (theme !== 'system')
+        return theme;
+    if (typeof window === 'undefined')
+        return 'light';
+    if (typeof window.matchMedia !== 'function')
+        return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+}
+/**
+ * Returns the concrete light/dark theme currently in use.
+ */
+export function getTheme(options = {}) {
+    return getResolvedTheme(getThemePreference(options));
+}
 /**
  * ThemeProvider component that manages and provides theme context to its children.
  * Handles system theme detection and persistence of theme preference.
@@ -30,17 +71,9 @@ const ThemeProviderContext = createContext(initialState);
  * }
  * ```
  */
-export function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'sqlrooms-ui-theme', ...props }) {
-    const [theme, setTheme] = useState(() => {
-        if (typeof window === 'undefined')
-            return defaultTheme;
-        try {
-            return window.localStorage.getItem(storageKey) || defaultTheme;
-        }
-        catch {
-            return defaultTheme;
-        }
-    });
+export function ThemeProvider({ children, defaultTheme = DEFAULT_THEME, storageKey = DEFAULT_THEME_STORAGE_KEY, ...props }) {
+    const [theme, setTheme] = useState(() => getThemePreference({ defaultTheme, storageKey }));
+    const [resolvedTheme, setResolvedTheme] = useState(() => getResolvedTheme(theme));
     // Apply theme class before paint to avoid a light-theme flash on initial load.
     // (useLayoutEffect on the client, fall back to useEffect in non-DOM environments)
     const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -48,19 +81,25 @@ export function ThemeProvider({ children, defaultTheme = 'system', storageKey =
         if (typeof window === 'undefined')
             return;
         const root = window.document.documentElement;
+        const resolved = getResolvedTheme(theme);
         root.classList.remove('light', 'dark');
-        if (theme === 'system') {
-            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
-                .matches
-                ? 'dark'
-                : 'light';
-            root.classList.add(systemTheme);
-            return;
+        root.classList.add(resolved);
+        setResolvedTheme(resolved);
+        if (theme === 'system' && typeof window.matchMedia === 'function') {
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            const listener = () => {
+                const next = getResolvedTheme(theme);
+                root.classList.remove('light', 'dark');
+                root.classList.add(next);
+                setResolvedTheme(next);
+            };
+            mediaQuery.addEventListener('change', listener);
+            return () => mediaQuery.removeEventListener('change', listener);
         }
-        root.classList.add(theme);
     }, [theme]);
     const value = {
         theme,
+        resolvedTheme,
         setTheme: (theme) => {
             if (typeof window !== 'undefined') {
                 try {

package/dist/theme/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,SAAS,EACT,eAAe,EACf,QAAQ,GACT,MAAM,OAAO,CAAC;AAgCf,MAAM,YAAY,GAAuB;IACvC,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;CACrB,CAAC;AAEF,MAAM,oBAAoB,GAAG,aAAa,CAAqB,YAAY,CAAC,CAAC;AAE7E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,GAAG,QAAQ,EACvB,UAAU,GAAG,mBAAmB,EAChC,GAAG,KAAK,EACW;IACnB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,GAAG,EAAE;QAC7C,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO,YAAY,CAAC;QACvD,IAAI,CAAC;YACH,OAAQ,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAW,IAAI,YAAY,CAAC;QAC5E,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,YAAY,CAAC;QACtB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,+EAA+E;IAC/E,kFAAkF;IAClF,MAAM,yBAAyB,GAC7B,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,yBAAyB,CAAC,GAAG,EAAE;QAC7B,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAC1C,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;QAE7C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAEvC,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;iBAClE,OAAO;gBACR,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,OAAO,CAAC;YAEZ,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YAChC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,KAAK,GAAG;QACZ,KAAK;QACL,QAAQ,EAAE,CAAC,KAAY,EAAE,EAAE;YACzB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;gBAClC,IAAI,CAAC;oBACH,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;gBACjD,CAAC;gBAAC,MAAM,CAAC;oBACP,mDAAmD;gBACrD,CAAC;YACH,CAAC;YACD,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;KACF,CAAC;IAEF,OAAO,CACL,KAAC,oBAAoB,CAAC,QAAQ,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,YACnD,QAAQ,GACqB,CACjC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEjD,IAAI,OAAO,KAAK,SAAS;QACvB,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IAElE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import {\n  createContext,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\n\n/**\n * Available theme options\n * @typedef {'dark' | 'light' | 'system'} Theme\n */\ntype Theme = 'dark' | 'light' | 'system';\n\n/**\n * Props for the ThemeProvider component\n * @interface ThemeProviderProps\n * @property {React.ReactNode} children - Child components that will have access to the theme context\n * @property {Theme} [defaultTheme='system'] - Initial theme to use if none is stored\n * @property {string} [storageKey='sqlrooms-ui-theme'] - Local storage key to persist theme preference\n */\ntype ThemeProviderProps = {\n  children: React.ReactNode;\n  defaultTheme?: Theme;\n  storageKey?: string;\n};\n\n/**\n * Theme context state\n * @interface ThemeProviderState\n * @property {Theme} theme - Current active theme\n * @property {(theme: Theme) => void} setTheme - Function to update the current theme\n */\ntype ThemeProviderState = {\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n};\n\nconst initialState: ThemeProviderState = {\n  theme: 'system',\n  setTheme: () => null,\n};\n\nconst ThemeProviderContext = createContext<ThemeProviderState>(initialState);\n\n/**\n * ThemeProvider component that manages and provides theme context to its children.\n * Handles system theme detection and persistence of theme preference.\n *\n * @example\n * ```tsx\n * // Basic usage with default settings\n * function App() {\n *   return (\n *     <ThemeProvider>\n *       <YourApp />\n *     </ThemeProvider>\n *   );\n * }\n *\n * // Custom default theme and storage key\n * function App() {\n *   return (\n *     <ThemeProvider defaultTheme=\"dark\" storageKey=\"my-app-theme\">\n *       <YourApp />\n *     </ThemeProvider>\n *   );\n * }\n * ```\n */\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'system',\n  storageKey = 'sqlrooms-ui-theme',\n  ...props\n}: ThemeProviderProps) {\n  const [theme, setTheme] = useState<Theme>(() => {\n    if (typeof window === 'undefined') return defaultTheme;\n    try {\n      return (window.localStorage.getItem(storageKey) as Theme) || defaultTheme;\n    } catch {\n      return defaultTheme;\n    }\n  });\n\n  // Apply theme class before paint to avoid a light-theme flash on initial load.\n  // (useLayoutEffect on the client, fall back to useEffect in non-DOM environments)\n  const useIsomorphicLayoutEffect =\n    typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n  useIsomorphicLayoutEffect(() => {\n    if (typeof window === 'undefined') return;\n    const root = window.document.documentElement;\n\n    root.classList.remove('light', 'dark');\n\n    if (theme === 'system') {\n      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')\n        .matches\n        ? 'dark'\n        : 'light';\n\n      root.classList.add(systemTheme);\n      return;\n    }\n\n    root.classList.add(theme);\n  }, [theme]);\n\n  const value = {\n    theme,\n    setTheme: (theme: Theme) => {\n      if (typeof window !== 'undefined') {\n        try {\n          window.localStorage.setItem(storageKey, theme);\n        } catch {\n          // ignore (e.g. SSR, private mode, blocked storage)\n        }\n      }\n      setTheme(theme);\n    },\n  };\n\n  return (\n    <ThemeProviderContext.Provider {...props} value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  );\n}\n\n/**\n * Hook to access the current theme and theme setter function.\n * Must be used within a ThemeProvider component.\n *\n * @example\n * ```tsx\n * import { Button } from '@sqlrooms/ui';\n *\n * function ThemeToggle() {\n *   const { theme, setTheme } = useTheme();\n *   const isDark = theme === 'dark';\n *\n *   return (\n *     <Button\n *       variant=\"outline\"\n *       size=\"sm\"\n *       onClick={() => setTheme(isDark ? 'light' : 'dark')}\n *     >\n *       {isDark ? '☀️ Light' : '🌙 Dark'}\n *     </Button>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * import { ThemeSwitch } from '@sqlrooms/ui';\n *\n * function AppHeader() {\n *   return (\n *     <nav className=\"border-b\">\n *       <div className=\"flex h-16 items-center px-4\">\n *         <div className=\"ml-auto\">\n *           <ThemeSwitch />\n *         </div>\n *       </div>\n *     </nav>\n *   );\n * }\n * ```\n *\n * @returns {ThemeProviderState} Object containing current theme and setTheme function\n * @throws {Error} If used outside of a ThemeProvider\n */\nexport const useTheme = () => {\n  const context = useContext(ThemeProviderContext);\n\n  if (context === undefined)\n    throw new Error('useTheme must be used within a ThemeProvider');\n\n  return context;\n};\n"]}
+{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\n\n/**\n * Available theme options\n * @typedef {'dark' | 'light' | 'system'} Theme\n */\nexport type Theme = 'dark' | 'light' | 'system';\nexport type ResolvedTheme = Exclude<Theme, 'system'>;\n\nexport const DEFAULT_THEME: Theme = 'system';\nexport const DEFAULT_THEME_STORAGE_KEY = 'sqlrooms-ui-theme';\n\ntype GetThemeOptions = {\n  defaultTheme?: Theme;\n  storageKey?: string;\n};\n\n/**\n * Props for the ThemeProvider component\n * @interface ThemeProviderProps\n * @property {React.ReactNode} children - Child components that will have access to the theme context\n * @property {Theme} [defaultTheme='system'] - Initial theme to use if none is stored\n * @property {string} [storageKey='sqlrooms-ui-theme'] - Local storage key to persist theme preference\n */\ntype ThemeProviderProps = {\n  children: React.ReactNode;\n  defaultTheme?: Theme;\n  storageKey?: string;\n};\n\n/**\n * Theme context state\n * @interface ThemeProviderState\n * @property {Theme} theme - Current active theme\n * @property {(theme: Theme) => void} setTheme - Function to update the current theme\n */\ntype ThemeProviderState = {\n  theme: Theme;\n  resolvedTheme: ResolvedTheme;\n  setTheme: (theme: Theme) => void;\n};\n\nconst initialState: ThemeProviderState = {\n  theme: DEFAULT_THEME,\n  resolvedTheme: getResolvedTheme(DEFAULT_THEME),\n  setTheme: () => null,\n};\n\nconst ThemeProviderContext = createContext<ThemeProviderState>(initialState);\n\nfunction isTheme(value: string | null): value is Theme {\n  return value === 'light' || value === 'dark' || value === 'system';\n}\n\n/**\n * Returns the currently stored theme preference without requiring React context.\n * Falls back to the provided default when storage is unavailable or invalid.\n */\nexport function getThemePreference({\n  defaultTheme = DEFAULT_THEME,\n  storageKey = DEFAULT_THEME_STORAGE_KEY,\n}: GetThemeOptions = {}): Theme {\n  if (typeof window === 'undefined') return defaultTheme;\n\n  try {\n    const storedTheme = window.localStorage.getItem(storageKey);\n    return isTheme(storedTheme) ? storedTheme : defaultTheme;\n  } catch {\n    return defaultTheme;\n  }\n}\n\n/**\n * Resolves a theme preference to the concrete light/dark theme currently in use.\n */\nexport function getResolvedTheme(theme: Theme): ResolvedTheme {\n  if (theme !== 'system') return theme;\n  if (typeof window === 'undefined') return 'light';\n  if (typeof window.matchMedia !== 'function') return 'light';\n\n  return window.matchMedia('(prefers-color-scheme: dark)').matches\n    ? 'dark'\n    : 'light';\n}\n\n/**\n * Returns the concrete light/dark theme currently in use.\n */\nexport function getTheme(options: GetThemeOptions = {}): ResolvedTheme {\n  return getResolvedTheme(getThemePreference(options));\n}\n\n/**\n * ThemeProvider component that manages and provides theme context to its children.\n * Handles system theme detection and persistence of theme preference.\n *\n * @example\n * ```tsx\n * // Basic usage with default settings\n * function App() {\n *   return (\n *     <ThemeProvider>\n *       <YourApp />\n *     </ThemeProvider>\n *   );\n * }\n *\n * // Custom default theme and storage key\n * function App() {\n *   return (\n *     <ThemeProvider defaultTheme=\"dark\" storageKey=\"my-app-theme\">\n *       <YourApp />\n *     </ThemeProvider>\n *   );\n * }\n * ```\n */\nexport function ThemeProvider({\n  children,\n  defaultTheme = DEFAULT_THEME,\n  storageKey = DEFAULT_THEME_STORAGE_KEY,\n  ...props\n}: ThemeProviderProps) {\n  const [theme, setTheme] = useState<Theme>(() =>\n    getThemePreference({defaultTheme, storageKey}),\n  );\n\n  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>(() =>\n    getResolvedTheme(theme),\n  );\n\n  // Apply theme class before paint to avoid a light-theme flash on initial load.\n  // (useLayoutEffect on the client, fall back to useEffect in non-DOM environments)\n  const useIsomorphicLayoutEffect =\n    typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n  useIsomorphicLayoutEffect(() => {\n    if (typeof window === 'undefined') return;\n    const root = window.document.documentElement;\n    const resolved = getResolvedTheme(theme);\n\n    root.classList.remove('light', 'dark');\n    root.classList.add(resolved);\n    setResolvedTheme(resolved);\n\n    if (theme === 'system' && typeof window.matchMedia === 'function') {\n      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n      const listener = () => {\n        const next = getResolvedTheme(theme);\n        root.classList.remove('light', 'dark');\n        root.classList.add(next);\n        setResolvedTheme(next);\n      };\n      mediaQuery.addEventListener('change', listener);\n      return () => mediaQuery.removeEventListener('change', listener);\n    }\n  }, [theme]);\n\n  const value = {\n    theme,\n    resolvedTheme,\n    setTheme: (theme: Theme) => {\n      if (typeof window !== 'undefined') {\n        try {\n          window.localStorage.setItem(storageKey, theme);\n        } catch {\n          // ignore (e.g. SSR, private mode, blocked storage)\n        }\n      }\n      setTheme(theme);\n    },\n  };\n\n  return (\n    <ThemeProviderContext.Provider {...props} value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  );\n}\n\n/**\n * Hook to access the current theme and theme setter function.\n * Must be used within a ThemeProvider component.\n *\n * @example\n * ```tsx\n * import { Button } from '@sqlrooms/ui';\n *\n * function ThemeToggle() {\n *   const { theme, setTheme } = useTheme();\n *   const isDark = theme === 'dark';\n *\n *   return (\n *     <Button\n *       variant=\"outline\"\n *       size=\"sm\"\n *       onClick={() => setTheme(isDark ? 'light' : 'dark')}\n *     >\n *       {isDark ? '☀️ Light' : '🌙 Dark'}\n *     </Button>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * import { ThemeSwitch } from '@sqlrooms/ui';\n *\n * function AppHeader() {\n *   return (\n *     <nav className=\"border-b\">\n *       <div className=\"flex h-16 items-center px-4\">\n *         <div className=\"ml-auto\">\n *           <ThemeSwitch />\n *         </div>\n *       </div>\n *     </nav>\n *   );\n * }\n * ```\n *\n * @returns {ThemeProviderState} Object containing current theme and setTheme function\n * @throws {Error} If used outside of a ThemeProvider\n */\nexport const useTheme = () => {\n  const context = useContext(ThemeProviderContext);\n\n  if (context === undefined)\n    throw new Error('useTheme must be used within a ThemeProvider');\n\n  return context;\n};\n"]}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sqlrooms/ui",
-  "version": "0.29.0-rc.0",
+  "version": "0.29.0-rc.2",
   "type": "module",
   "sideEffects": false,
   "author": "SQLRooms Contributors",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/sqlrooms/sqlrooms.git"
+    "url": "git+https://github.com/sqlrooms/sqlrooms.git"
   },
   "files": [
     "dist",
@@ -37,6 +37,7 @@
     "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-menubar": "^1.1.16",
     "@radix-ui/react-popover": "^1.1.15",
@@ -49,7 +50,6 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -71,5 +71,5 @@
   "peerDependencies": {
     "tailwindcss": "^4.1.18"
   },
-  "gitHead": "afdb949c9601b4cdeaae966157a25a54aea2ae54"
+  "gitHead": "5d511631992c1af8852ea79ced488867aad4a555"
 }

package/tailwind-preset.css

@@ -5,6 +5,13 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
 :root {
   --background: 0 0% 100%;
   --foreground: 240 10% 3.9%;
@@ -39,6 +46,24 @@
   --sidebar-border: 220 13% 91%;
   --sidebar-ring: 217.2 91.2% 59.8%;
   --radius: 0.5rem;
+  --editor-keyword: 240 100% 50%;
+  --editor-string: 0 57% 33%;
+  --editor-number: 156 100% 30%;
+  --editor-comment: 120 100% 25%;
+  --editor-operator: 0 0% 0%;
+  --editor-punctuation: 0 0% 0%;
+  --editor-property: 214 100% 25%;
+  --editor-function: 38 63% 33%;
+  --editor-type: 156 100% 30%;
+  --editor-constant: 204 100% 38%;
+  --editor-invalid: 0 70% 49%;
+  --editor-selection-match: 207 100% 84%;
+  --editor-bracket-match: 0 0% 0%;
+  --editor-fold-placeholder: 220 14% 91%;
+  --editor-search-match: 60 100% 50%;
+  --editor-search-match-selected: 60 100% 50%;
+  --editor-lint-error: 0 63% 49%;
+  --editor-lint-warning: 32 94% 48%;
 }
 
 .dark {
@@ -74,6 +99,24 @@
   --sidebar-accent-foreground: 240 4.8% 95.9%;
   --sidebar-border: 240 3.7% 15.9%;
   --sidebar-ring: 217.2 91.2% 59.8%;
+  --editor-keyword: 206 100% 60%;
+  --editor-string: 25 58% 59%;
+  --editor-number: 120 43% 71%;
+  --editor-comment: 122 39% 49%;
+  --editor-operator: 0 0% 83%;
+  --editor-punctuation: 0 0% 83%;
+  --editor-property: 207 100% 74%;
+  --editor-function: 49 44% 67%;
+  --editor-type: 167 47% 55%;
+  --editor-constant: 210 100% 66%;
+  --editor-invalid: 0 100% 63%;
+  --editor-selection-match: 207 35% 35%;
+  --editor-bracket-match: 0 0% 100%;
+  --editor-fold-placeholder: 0 0% 24%;
+  --editor-search-match: 43 16% 33%;
+  --editor-search-match-selected: 43 16% 33%;
+  --editor-lint-error: 3 88% 71%;
+  --editor-lint-warning: 28 100% 72%;
 }
 
 @theme inline {
@@ -113,6 +156,26 @@
   --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
   --color-sidebar-border: hsl(var(--sidebar-border));
   --color-sidebar-ring: hsl(var(--sidebar-ring));
+  --color-editor-keyword: hsl(var(--editor-keyword));
+  --color-editor-string: hsl(var(--editor-string));
+  --color-editor-number: hsl(var(--editor-number));
+  --color-editor-comment: hsl(var(--editor-comment));
+  --color-editor-operator: hsl(var(--editor-operator));
+  --color-editor-punctuation: hsl(var(--editor-punctuation));
+  --color-editor-property: hsl(var(--editor-property));
+  --color-editor-function: hsl(var(--editor-function));
+  --color-editor-type: hsl(var(--editor-type));
+  --color-editor-constant: hsl(var(--editor-constant));
+  --color-editor-invalid: hsl(var(--editor-invalid));
+  --color-editor-selection-match: hsl(var(--editor-selection-match));
+  --color-editor-bracket-match: hsl(var(--editor-bracket-match));
+  --color-editor-fold-placeholder: hsl(var(--editor-fold-placeholder));
+  --color-editor-search-match: hsl(var(--editor-search-match));
+  --color-editor-search-match-selected: hsl(
+    var(--editor-search-match-selected)
+  );
+  --color-editor-lint-error: hsl(var(--editor-lint-error));
+  --color-editor-lint-warning: hsl(var(--editor-lint-warning));
   --animate-sqlrooms-progress: sqlrooms-progress 1s infinite linear;
 }
 
@@ -136,6 +199,19 @@
   body {
     @apply bg-background text-foreground;
   }
+
+}
+
+@layer utilities {
+  .no-spinner {
+    appearance: textfield;
+  }
+
+  .no-spinner::-webkit-outer-spin-button,
+  .no-spinner::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
 }
 
 @layer components {