@alepha/ui 0.18.1 → 0.18.3

package/src/core/json/components/JsonViewerShared.ts

@@ -0,0 +1,76 @@
+import type { MantineSize } from "@mantine/core";
+import type { CSSProperties } from "react";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface JsonTreeNode {
+  value: string;
+  label: string;
+  children?: JsonTreeNode[];
+  nodeValue: any;
+  nodeKey: string | undefined;
+  path: string[];
+  isArrayItem: boolean;
+  isRoot?: boolean;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+export const SIZE_CONFIG: Record<
+  MantineSize,
+  { icon: number; levelOffset: number }
+> = {
+  xs: { icon: 14, levelOffset: 16 },
+  sm: { icon: 16, levelOffset: 20 },
+  md: { icon: 18, levelOffset: 24 },
+  lg: { icon: 20, levelOffset: 28 },
+  xl: { icon: 22, levelOffset: 32 },
+};
+
+export const STYLES = {
+  root: {
+    fontFamily: "var(--mantine-font-family-monospace)",
+  } satisfies CSSProperties,
+  chevron: {
+    flexShrink: 0,
+    color: "var(--mantine-color-dimmed)",
+  } satisfies CSSProperties,
+  key: {
+    color: "var(--mantine-color-cyan-text)",
+    fontWeight: 500,
+  } satisfies CSSProperties,
+  colon: {
+    color: "var(--mantine-color-dimmed)",
+  } satisfies CSSProperties,
+  string: {
+    color: "var(--mantine-color-teal-text)",
+  } satisfies CSSProperties,
+  number: {
+    color: "var(--mantine-color-blue-text)",
+  } satisfies CSSProperties,
+  boolean: {
+    color: "var(--mantine-color-violet-text)",
+  } satisfies CSSProperties,
+  null: {
+    color: "var(--mantine-color-dimmed)",
+    fontStyle: "italic",
+  } satisfies CSSProperties,
+  preview: {
+    color: "var(--mantine-color-dimmed)",
+  } satisfies CSSProperties,
+};
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+export const getValueType = (val: any): string => {
+  if (val === null) return "null";
+  if (val === undefined) return "undefined";
+  if (Array.isArray(val)) return "array";
+  return typeof val;
+};

package/src/core/providers/ThemeProvider.ts

@@ -1,8 +1,12 @@
 import { $inject, Alepha, AlephaError } from "alepha";
-import { $head } from "alepha/react/head";
+import { $head, BrowserHeadProvider } from "alepha/react/head";
 import { $cookie } from "alepha/server/cookies";
 import { alephaThemeAtom } from "../atoms/alephaThemeAtom.ts";
 import { alephaThemeListAtom } from "../atoms/alephaThemeListAtom.ts";
+import {
+  type AlephaThemeOverrides,
+  alephaThemeOverridesAtom,
+} from "../atoms/alephaThemeOverridesAtom.ts";
 import { defaultTheme } from "../atoms/themes/default.ts";
 import type { AlephaTheme } from "../interfaces/AlephaTheme.ts";
 
@@ -14,6 +18,12 @@ export class ThemeProvider {
     ttl: [1, "year"],
   });
 
+  protected readonly overridesCookie = $cookie({
+    name: "themeOverrides",
+    schema: alephaThemeOverridesAtom.schema,
+    ttl: [1, "year"],
+  });
+
   protected readonly head = $head(() => {
     const theme = this.getTheme();
     if (!theme || !theme.name) {
@@ -21,8 +31,9 @@ export class ThemeProvider {
     }
     return {
       htmlAttributes: {
-        "data-theme": theme.name,
+        "data-theme": this.slugify(theme.name),
       },
+      ...theme.head,
     };
   });
 
@@ -38,23 +49,112 @@ export class ThemeProvider {
     this.cookie.set({ index });
     this.alepha.store.set(alephaThemeAtom, { index });
 
-    if (typeof document === "undefined") {
+    if (!this.alepha.isBrowser()) {
       return;
     }
 
-    document.documentElement.removeAttribute("data-theme");
+    this.alepha.inject(BrowserHeadProvider).refreshGlobalHead();
+  }
 
-    if (newTheme.name) {
-      document.documentElement.setAttribute("data-theme", newTheme.name);
-    }
+  protected slugify(name: string): string {
+    return name.toLowerCase().replace(/\s+/g, "-");
   }
 
+  protected static readonly FONT_SIZE_MULTIPLIERS: Record<string, number> = {
+    xs: 0.85,
+    sm: 0.925,
+    md: 1,
+    lg: 1.1,
+    xl: 1.25,
+  };
+
+  protected static readonly SCALE_VALUES: Record<string, number> = {
+    xs: 0.85,
+    sm: 0.925,
+    md: 1,
+    lg: 1.1,
+    xl: 1.25,
+  };
+
+  protected static readonly DEFAULT_FONT_SIZES: Record<string, string> = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+  };
+
   public getTheme() {
     const index = this.getThemeIndex();
     const list = this.alepha.store.get(
       alephaThemeListAtom,
     ) as Array<AlephaTheme>;
-    return list[index] || list[0] || defaultTheme;
+    const base = list[index] || list[0] || defaultTheme;
+    const overrides = this.getThemeOverrides();
+
+    if (
+      !overrides.primaryColor &&
+      !overrides.radius &&
+      !overrides.fontFamily &&
+      !overrides.fontSize &&
+      !overrides.scale
+    ) {
+      return base;
+    }
+
+    const merged = {
+      ...base,
+      ...(overrides.primaryColor && { primaryColor: overrides.primaryColor }),
+      ...(overrides.radius && { defaultRadius: overrides.radius }),
+      ...(overrides.fontFamily && { fontFamily: overrides.fontFamily }),
+      ...(overrides.scale &&
+        overrides.scale !== "md" && {
+          scale: ThemeProvider.SCALE_VALUES[overrides.scale] ?? 1,
+        }),
+    };
+
+    if (overrides.fontSize && overrides.fontSize !== "md") {
+      const multiplier =
+        ThemeProvider.FONT_SIZE_MULTIPLIERS[overrides.fontSize] ?? 1;
+      const baseSizes =
+        (base.fontSizes as Record<string, string> | undefined) ??
+        ThemeProvider.DEFAULT_FONT_SIZES;
+      merged.fontSizes = Object.fromEntries(
+        Object.entries(baseSizes).map(([key, val]) => [
+          key,
+          `${(Number.parseFloat(String(val)) * multiplier).toFixed(4)}rem`,
+        ]),
+      ) as typeof merged.fontSizes;
+    }
+
+    return merged;
+  }
+
+  public setThemeOverrides(overrides: AlephaThemeOverrides) {
+    this.overridesCookie.set(overrides);
+    this.alepha.store.set(alephaThemeOverridesAtom, overrides);
+
+    if (!this.alepha.isBrowser()) {
+      return;
+    }
+
+    this.alepha.inject(BrowserHeadProvider).refreshGlobalHead();
+  }
+
+  public getThemeOverrides(): AlephaThemeOverrides {
+    try {
+      return (
+        this.overridesCookie.get() ??
+        this.alepha.store.get(alephaThemeOverridesAtom) ??
+        {}
+      );
+    } catch {
+      return this.alepha.store.get(alephaThemeOverridesAtom) ?? {};
+    }
+  }
+
+  public resetThemeOverrides() {
+    this.setThemeOverrides({});
   }
 
   protected getThemeIndex() {

package/src/core/services/DialogService.tsx

@@ -73,15 +73,22 @@ export class DialogService {
    */
   public alert(options?: AlertDialogOptions): Promise<void> {
     return new Promise((resolve) => {
+      let resolved = false;
+      const done = () => {
+        if (resolved) return;
+        resolved = true;
+        resolve();
+      };
       const modalId = this.open({
         ...options,
         title: options?.title || "Alert",
+        onClose: done,
         content: (
           <AlertDialog
             options={options}
             onClose={() => {
               this.close(modalId);
-              resolve();
+              done();
             }}
           />
         ),
@@ -94,17 +101,24 @@ export class DialogService {
    */
   public confirm(options?: ConfirmDialogOptions): Promise<boolean> {
     return new Promise((resolve) => {
+      let resolved = false;
+      const done = (confirmed: boolean) => {
+        if (resolved) return;
+        resolved = true;
+        resolve(confirmed);
+      };
       const modalId = this.open({
         ...options,
         title: options?.title || "Confirm",
         closeOnClickOutside: false,
         closeOnEscape: false,
+        onClose: () => done(false),
         content: (
           <ConfirmDialog
             options={options}
             onConfirm={(confirmed) => {
               this.close(modalId);
-              resolve(confirmed);
+              done(confirmed);
             }}
           />
         ),
@@ -117,17 +131,24 @@ export class DialogService {
    */
   public prompt(options?: PromptDialogOptions): Promise<string | null> {
     return new Promise((resolve) => {
+      let resolved = false;
+      const done = (value: string | null) => {
+        if (resolved) return;
+        resolved = true;
+        resolve(value);
+      };
       const modalId = this.open({
         ...options,
         title: options?.title || "Input",
         closeOnClickOutside: false,
         closeOnEscape: false,
+        onClose: () => done(null),
         content: (
           <PromptDialog
             options={options}
             onSubmit={(value) => {
               this.close(modalId);
-              resolve(value);
+              done(value);
             }}
           />
         ),

package/src/core/styles.css

@@ -8,9 +8,9 @@
 @import "./json/components/JsonViewer.css";
 
 :root {
-  --alepha-background-light: var(--mantine-color-gray-1);
-  --alepha-background-dark: var(--mantine-color-dark-9);
-  --alepha-background: var(--alepha-background-light);
+  --alepha-ground-light: var(--mantine-color-gray-1);
+  --alepha-ground-dark: var(--mantine-color-dark-9);
+  --alepha-ground: var(--alepha-ground-light);
 
   --alepha-surface-light: var(--mantine-color-gray-0);
   --alepha-surface-dark: var(--mantine-color-dark-8);
@@ -31,32 +31,46 @@
   --alepha-text: var(--alepha-text-light);
 }
 
-/*#root {*/
-/*  display: flex;*/
-/*  background-color: var(--alepha-background);*/
-/*  color: var(--alepha-text);*/
-/*  min-height: 100dvh;*/
-/*  flex-direction: column;*/
-/*}*/
-
 /* ------------------------------------------------------------------------------------------------------------------ */
 
 [data-mantine-color-scheme="dark"] {
   --alepha-surface: var(--alepha-surface-dark);
   --alepha-elevated: var(--alepha-elevated-dark);
   --alepha-elevated-hover: var(--alepha-elevated-hover-dark);
-  --alepha-background: var(--alepha-background-dark);
+  --alepha-ground: var(--alepha-ground-dark);
   --alepha-text: var(--alepha-text-dark);
 }
 
 /* ------------------------------------------------------------------------------------------------------------------ */
 
+.shadow-xs {
+  box-shadow: var(--mantine-shadow-xs);
+}
+
+.shadow-sm {
+  box-shadow: var(--mantine-shadow-sm);
+}
+
+.shadow-md {
+  box-shadow: var(--mantine-shadow-md);
+}
+
+.shadow-lg {
+  box-shadow: var(--mantine-shadow-lg);
+}
+
+.shadow-xl {
+  box-shadow: var(--mantine-shadow-xl);
+}
+
 .overflow-auto {
   overflow: auto;
   scrollbar-color: var(--alepha-text-muted) transparent;
   scrollbar-width: thin;
 }
 
+/* ------------------------------------------------------------------------------------------------------------------ */
+
 /* Sidebar scroll area - subtle scrollbar that appears on hover */
 .alepha-sidebar-scroll {
   overflow-y: auto;
@@ -97,20 +111,19 @@
 }
 
 /* ------------------------------------------------------------------------------------------------------------------ */
-/* Sidebar Transitions */
-
-.alepha-sidebar-navbar {
-  transition: width 0.2s ease-in-out;
+/* our custom "minimal" variant for <Button/> - from Blueprint */
+.mantine-Button-root[data-variant="minimal"] {
+  background-color: transparent;
+  color: var(--mantine-color-text);
 }
 
-.alepha-sidebar-main {
-  transition: padding-left 0.2s ease-in-out;
+.mantine-Button-root[data-variant="minimal"]:hover {
+  /* imitate the hover effect of <Table/> rows */
+  background-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
 }
 
 /* ------------------------------------------------------------------------------------------------------------------ */
-/* Modal Customizations */
 
-/* Custom modal scale animation */
 @keyframes modalScaleIn {
   from {
     opacity: 0;

package/src/core/table/components/ColumnPicker.tsx

@@ -76,7 +76,7 @@ const ColumnPicker = <T extends object, Filters extends TObject>({
       <Popover.Target>
         <div>
           <ActionButton
-            variant="subtle"
+            variant={"minimal"}
             icon={IconColumns}
             onClick={() => setOpened((o) => !o)}
           />
@@ -104,14 +104,14 @@ const ColumnPicker = <T extends object, Filters extends TObject>({
             <Flex gap={4}>
               <ActionButton
                 size="compact-xs"
-                variant="subtle"
+                variant={"minimal"}
                 onClick={handleShowAll}
               >
                 All
               </ActionButton>
               <ActionButton
                 size="compact-xs"
-                variant="subtle"
+                variant={"minimal"}
                 onClick={handleDefault}
               >
                 Default