@hellboy/ds 0.1.2 → 0.2.7

package/dist/components/layout.mjs

@@ -0,0 +1,352 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/components/layout/Layout.tsx
+import * as React3 from "react";
+
+// src/components/drag-handle/DragHandle.tsx
+import React, { useState, useRef, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+var DragHandle = ({
+  onResize,
+  onResizeEnd,
+  orientation = "vertical",
+  className = ""
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const dragHandleRef = useRef(null);
+  const startPosRef = useRef(0);
+  const handleMouseDown = useCallback((e) => {
+    setIsDragging(true);
+    startPosRef.current = orientation === "vertical" ? e.clientX : e.clientY;
+    e.preventDefault();
+  }, [orientation]);
+  const handleMouseMove = useCallback((e) => {
+    if (!isDragging) return;
+    const currentPos = orientation === "vertical" ? e.clientX : e.clientY;
+    const delta = currentPos - startPosRef.current;
+    onResize(delta);
+    startPosRef.current = currentPos;
+  }, [isDragging, onResize, orientation]);
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    onResizeEnd?.();
+  }, [onResizeEnd]);
+  React.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = orientation === "vertical" ? "col-resize" : "row-resize";
+      document.body.style.userSelect = "none";
+    } else {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp, orientation]);
+  const classes = [
+    "drag-handle",
+    `drag-handle--${orientation}`,
+    isDragging && "drag-handle--dragging",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: dragHandleRef,
+      className: classes,
+      onMouseDown: handleMouseDown,
+      children: /* @__PURE__ */ jsx("div", { className: "drag-handle__indicator" })
+    }
+  );
+};
+
+// src/utils/user-preferences.ts
+var DEFAULT_CONFIG = {
+  backend: "localStorage",
+  prefix: "hellboy-ds",
+  dbName: "hellboy-ds-prefs",
+  storeName: "preferences"
+};
+var config = { ...DEFAULT_CONFIG };
+var getStorageKey = (key) => {
+  return `${config.prefix}:${key}`;
+};
+var isLocalStorageAvailable = () => {
+  try {
+    const test = "__storage_test__";
+    localStorage.setItem(test, test);
+    localStorage.removeItem(test);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var IndexedDBStore = class {
+  constructor() {
+    __publicField(this, "db", null);
+  }
+  async init() {
+    if (typeof window === "undefined" || !window.indexedDB) {
+      throw new Error("IndexedDB not available");
+    }
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(config.dbName, 1);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve();
+      };
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        if (!db.objectStoreNames.contains(config.storeName)) {
+          db.createObjectStore(config.storeName, { keyPath: "key" });
+        }
+      };
+    });
+  }
+  async get(key) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readonly");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.get(key);
+      request.onsuccess = () => resolve(request.result?.value);
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async set(key, value) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.put({ key, value });
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async remove(key) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.delete(key);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async clear() {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.clear();
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+};
+var indexedDBStore = new IndexedDBStore();
+var getPreference = (key, defaultValue) => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      const stored = localStorage.getItem(getStorageKey(key));
+      if (stored !== null) {
+        return JSON.parse(stored);
+      }
+    }
+    return defaultValue;
+  } catch (error) {
+    console.warn(`Failed to get preference "${key}":`, error);
+    return defaultValue;
+  }
+};
+var setPreference = (key, value) => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      localStorage.setItem(getStorageKey(key), JSON.stringify(value));
+    }
+  } catch (error) {
+    console.warn(`Failed to set preference "${key}":`, error);
+  }
+};
+
+// src/components/navbar/Navbar.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var NAVBAR_COLLAPSED_WIDTH = 64;
+var NAVBAR_MIN_PERSIST_WIDTH = 211;
+
+// src/components/layout/Layout.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var DEFAULT_LEFT_WIDTH = 280;
+var DEFAULT_RIGHT_WIDTH = 300;
+var MIN_WIDTH = NAVBAR_COLLAPSED_WIDTH;
+var MAX_WIDTH = 600;
+var Layout = ({
+  variant = "stacked",
+  header,
+  footer,
+  sidebarLeft,
+  sidebarRight,
+  bottomBar,
+  resizable = false,
+  hero,
+  children,
+  className = "",
+  ...props
+}) => {
+  const classes = ["layout", `layout--${variant}`, className].filter(Boolean).join(" ");
+  const hasSidebarLeft = sidebarLeft != null;
+  const hasSidebarRight = sidebarRight != null;
+  const columnCount = [hasSidebarLeft, true, hasSidebarRight].filter(Boolean).length;
+  const shouldShowResizers = resizable && columnCount >= 2;
+  const [leftSidebarWidth, setLeftSidebarWidth] = React3.useState(() => {
+    const isCollapsed = getPreference("layout.leftSidebarCollapsed", false);
+    if (isCollapsed) {
+      return NAVBAR_COLLAPSED_WIDTH;
+    }
+    const stored = getPreference("layout.leftSidebarWidth", DEFAULT_LEFT_WIDTH);
+    return typeof stored === "number" ? stored : DEFAULT_LEFT_WIDTH;
+  });
+  const [rightSidebarWidth, setRightSidebarWidth] = React3.useState(() => {
+    const stored = getPreference("layout.rightSidebarWidth", DEFAULT_RIGHT_WIDTH);
+    return typeof stored === "number" ? stored : DEFAULT_RIGHT_WIDTH;
+  });
+  const [leftSidebarPreferredWidth, setLeftSidebarPreferredWidth] = React3.useState(() => {
+    const savedWidth = getPreference("layout.leftSidebarWidth");
+    return typeof savedWidth === "number" && savedWidth >= NAVBAR_MIN_PERSIST_WIDTH ? savedWidth : DEFAULT_LEFT_WIDTH;
+  });
+  const [leftSidebarCollapsed, setLeftSidebarCollapsed] = React3.useState(() => {
+    const stored = getPreference("layout.leftSidebarCollapsed");
+    return typeof stored === "boolean" ? stored : false;
+  });
+  const clampWidth = React3.useCallback((width) => {
+    return Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, Math.round(width)));
+  }, []);
+  const updateLeftSidebarWidth = React3.useCallback(
+    (width) => {
+      const clamped = clampWidth(width);
+      setLeftSidebarWidth(clamped);
+      if (clamped >= NAVBAR_MIN_PERSIST_WIDTH) {
+        setPreference("layout.leftSidebarWidth", clamped);
+        setLeftSidebarPreferredWidth(clamped);
+        setLeftSidebarCollapsed(false);
+        setPreference("layout.leftSidebarCollapsed", false);
+      }
+    },
+    [clampWidth]
+  );
+  const updateRightSidebarWidth = React3.useCallback(
+    (width) => {
+      const clamped = clampWidth(width);
+      setRightSidebarWidth(clamped);
+      setPreference("layout.rightSidebarWidth", clamped);
+    },
+    [clampWidth]
+  );
+  const handleLeftResize = React3.useCallback(
+    (delta) => {
+      setLeftSidebarWidth((prev) => {
+        const next = clampWidth(prev + delta);
+        return next;
+      });
+    },
+    [clampWidth]
+  );
+  const handleLeftResizeEnd = React3.useCallback(() => {
+    setLeftSidebarWidth((currentWidth) => {
+      if (currentWidth >= NAVBAR_MIN_PERSIST_WIDTH) {
+        setPreference("layout.leftSidebarWidth", currentWidth);
+        setLeftSidebarPreferredWidth(currentWidth);
+        setLeftSidebarCollapsed(false);
+        setPreference("layout.leftSidebarCollapsed", false);
+        return currentWidth;
+      } else {
+        setLeftSidebarCollapsed(true);
+        setPreference("layout.leftSidebarCollapsed", true);
+        return NAVBAR_COLLAPSED_WIDTH;
+      }
+    });
+  }, []);
+  const handleRightResize = React3.useCallback(
+    (delta) => {
+      setRightSidebarWidth((prev) => {
+        const next = clampWidth(prev - delta);
+        setPreference("layout.rightSidebarWidth", next);
+        return next;
+      });
+    },
+    [clampWidth]
+  );
+  if (variant === "single" || variant === "stacked") {
+    return /* @__PURE__ */ jsx3("div", { className: classes, ...props, children: /* @__PURE__ */ jsxs("div", { className: "layout__container scrollable", children: [
+      hero,
+      /* @__PURE__ */ jsxs("main", { className: "layout__main", children: [
+        header && /* @__PURE__ */ jsx3("header", { className: "layout__header", children: header }),
+        children,
+        footer && footer
+      ] }),
+      bottomBar && /* @__PURE__ */ jsx3("div", { className: "layout__bottom-bar", children: bottomBar })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: classes, ...props, children: [
+    hasSidebarLeft && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx3(
+        "aside",
+        {
+          className: "layout__sidebar layout__sidebar--left scrollable",
+          style: { width: leftSidebarWidth },
+          children: React3.isValidElement(sidebarLeft) ? React3.cloneElement(sidebarLeft, {
+            sidebarWidth: leftSidebarWidth,
+            onRequestWidthChange: updateLeftSidebarWidth,
+            preferredWidth: leftSidebarPreferredWidth,
+            initialCollapsed: leftSidebarCollapsed
+          }) : sidebarLeft
+        }
+      ),
+      shouldShowResizers && /* @__PURE__ */ jsx3(
+        DragHandle,
+        {
+          orientation: "vertical",
+          onResize: handleLeftResize,
+          onResizeEnd: handleLeftResizeEnd
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "layout__container scrollable", children: [
+      hero,
+      /* @__PURE__ */ jsxs("main", { className: "layout__main", children: [
+        header && /* @__PURE__ */ jsx3("header", { className: "layout__header", children: header }),
+        children,
+        footer && /* @__PURE__ */ jsx3("div", { className: "layout__footer", children: footer })
+      ] }),
+      bottomBar && /* @__PURE__ */ jsx3("div", { className: "layout__bottom-bar", children: bottomBar })
+    ] }),
+    hasSidebarRight && /* @__PURE__ */ jsxs(Fragment, { children: [
+      shouldShowResizers && /* @__PURE__ */ jsx3(DragHandle, { orientation: "vertical", onResize: handleRightResize }),
+      /* @__PURE__ */ jsx3(
+        "aside",
+        {
+          className: "layout__sidebar layout__sidebar--right scrollable",
+          style: { width: rightSidebarWidth },
+          children: React3.isValidElement(sidebarRight) ? React3.cloneElement(sidebarRight, {
+            sidebarWidth: rightSidebarWidth,
+            onRequestWidthChange: updateRightSidebarWidth
+          }) : sidebarRight
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Layout
+};

package/{src/style/components/list → dist/components}/list.css

@@ -1,8 +1,48 @@
-/**
- * List Component Styles
- * List and ListItem with action colors for interactive states
- */
+/* src/style/components/icons/icons.css */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.icon--skeleton {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.06) 0%,
+      rgba(0, 0, 0, 0.03) 50%,
+      rgba(0, 0, 0, 0.06) 100%);
+  border-radius: 4px;
+  animation: hb-skeleton 1.2s ease-in-out infinite;
+}
+@keyframes hb-skeleton {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.icon {
+  display: inline-block;
+  flex-shrink: 0;
+  transition: color var(--transition-base, 0.2s ease);
+}
+.icon--interactive {
+  cursor: pointer;
+  color: var(--color-foreground-1);
+}
+.icon--interactive:hover:not(:disabled) {
+  color: var(--color-action-primary-hover);
+}
+.icon--interactive:active:not(:disabled) {
+  color: var(--color-action-primary-active);
+}
+.icon--interactive:disabled {
+  cursor: not-allowed;
+  color: var(--color-foreground-2);
+}
 
+/* src/style/components/list/list.css */
 .list {
   display: flex;
   flex-direction: column;
@@ -10,7 +50,6 @@
   padding: 0;
   margin: 0;
 }
-
 .list-item {
   display: flex;
   align-items: center;
@@ -21,54 +60,35 @@
   color: var(--color-foreground-1);
   background-color: transparent;
 }
-
 .list-item:not(:hover):not(:active) {
   transition: background-color var(--motion-duration-fast) var(--motion-easing-accelerate), color var(--motion-duration-fast) var(--motion-easing-accelerate);
 }
-
-/* Interactive items */
 .list-item--interactive {
   cursor: pointer;
   user-select: none;
 }
-
 .list-item--interactive:hover:not(.list-item--disabled) {
   background-color: var(--color-accent-hover);
 }
-
 .list-item--interactive:active:not(.list-item--disabled) {
   background-color: var(--color-accent-active);
 }
-
-/* Focus state - uses action colors */
 .list-item--interactive:focus-visible {
   outline: 2px solid var(--color-action-primary);
   outline-offset: 2px;
 }
-
-/* Selected state */
 .list-item--selected {
-  background-color: hsla(
-    var(--accent-hue),
-    var(--accent-saturation),
-    var(--accent-lightness),
-    0.12
-  );
+  background-color: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 0.12);
   color: var(--color-on-primary);
   font-weight: 500;
 }
-
 .list-item--selected:hover:not(.list-item--disabled) {
   background-color: var(--color-accent-active);
 }
-
-/* Disabled state */
 .list-item--disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
-
-/* Icon */
 .list-item__icon {
   display: flex;
   align-items: center;
@@ -76,12 +96,9 @@
   flex-shrink: 0;
   color: var(--color-foreground-2);
 }
-
 .list-item--selected .list-item__icon {
   color: var(--color-on-primary);
 }
-
-/* Content */
 .list-item__content {
   flex: 1;
   font-size: var(--font-size-base);
@@ -89,8 +106,6 @@
   flex-direction: column;
   gap: var(--spacing-1);
 }
-
-/* Category */
 .list-item__category {
   font-size: var(--font-size-xs);
   color: var(--color-foreground-3);
@@ -98,14 +113,11 @@
   letter-spacing: 0.5px;
   font-weight: 600;
 }
-
-/* Category section */
 .list-category {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
 }
-
 .list-category__title {
   font-size: var(--font-size-sm);
   font-weight: 600;
@@ -114,14 +126,11 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
-
 .list-category__items {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1);
 }
-
-/* Selected indicator */
 .list-item__indicator {
   display: flex;
   align-items: center;
@@ -129,12 +138,9 @@
   flex-shrink: 0;
   color: var(--color-action-primary);
 }
-
-/* Dark theme adjustments */
-:root[data-theme="dark"] .list-item--interactive:hover:not(.list-item--disabled) {
+:root[data-theme=dark] .list-item--interactive:hover:not(.list-item--disabled) {
   background-color: var(--color-accent-hover);
 }
-
-:root[data-theme="dark"] .list-item--selected {
+:root[data-theme=dark] .list-item--selected {
   background-color: var(--color-accent-active);
 }

package/dist/components/list.d.mts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Item content
+     */
+    children: React.ReactNode;
+    /**
+     * Icon name from our icon library
+     */
+    icon?: string;
+    /**
+     * Whether the item is selected
+     */
+    selected?: boolean;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Category label for organizing items (display only)
+     */
+    category?: string;
+}
+declare const ListItem: React.FC<ListItemProps>;
+interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * List items
+     */
+    children: React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare const List: React.FC<ListProps>;
+
+export { List, ListItem, type ListItemProps, type ListProps };

package/dist/components/list.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Item content
+     */
+    children: React.ReactNode;
+    /**
+     * Icon name from our icon library
+     */
+    icon?: string;
+    /**
+     * Whether the item is selected
+     */
+    selected?: boolean;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Category label for organizing items (display only)
+     */
+    category?: string;
+}
+declare const ListItem: React.FC<ListItemProps>;
+interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * List items
+     */
+    children: React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare const List: React.FC<ListProps>;
+
+export { List, ListItem, type ListItemProps, type ListProps };