mac-human-design 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,92 @@
+# human-design
+
+A reusable shared library for Tauri macOS apps. It includes:
+
+- `MacSegmentedControl` and macOS-focused BaseUI theme tokens.
+- A reusable SF Symbols fetch layer with React hooks/components.
+- A Rust/Tauri plugin crate that exposes a native command:
+  `system_symbol_png_data_url`.
+
+## Structure
+
+- `src/` - TypeScript/React library exports
+- `src-tauri/` - Rust plugin crate (`human-design-tauri-system-symbols`)
+
+## Install
+
+From the consumer app:
+
+```bash
+npm i human-design
+```
+
+In the Tauri Rust side, add the local path dependency while developing:
+
+```toml
+[dependencies]
+human-design-tauri-system-symbols = { path = "../human-design/src-tauri" }
+```
+
+Then register the plugin in your `src-tauri/src/lib.rs`:
+
+```rust
+fn main() {
+    tauri::Builder::default()
+        .plugin(human_design_tauri_system_symbols::init())
+        .run(tauri::generate_context!())
+        .expect("error while running app");
+}
+```
+
+## Usage (React)
+
+```ts
+import { useState } from "react";
+import { MacSegmentedControl } from "human-design";
+import { SystemSymbolImage } from "human-design/symbols";
+
+export function Demo() {
+  const [tab, setTab] = useState<"files" | "settings">("files");
+
+  return (
+    <div>
+      <SystemSymbolImage symbolName="folder" sizePx={18} fallback="▢" />
+      <MacSegmentedControl
+        options={[
+          { value: "files", label: "Files" },
+          { value: "settings", label: "Settings" },
+        ]}
+        value={tab}
+        onChange={setTab}
+      />
+    </div>
+  );
+}
+```
+
+## Why it works cross-platform
+
+## Shared UI components moved in
+
+The following components are now in the shared library and can be imported by any app:
+
+- `AppWindowShell`
+- `StatusMessage`
+- `SymbolIconButton`
+- `ViewDragRegion`
+- `isDraggableAreaTarget` utility
+
+Example import:
+
+```ts
+import {
+  AppWindowShell,
+  StatusMessage,
+  SymbolIconButton,
+  ViewDragRegion,
+  isDraggableAreaTarget,
+} from "human-design";
+```
+
+- On macOS, Rust command renders the symbol to PNG via `NSImage`.
+- On non-macOS, command returns `None` so invocations stay safe and predictable.

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "mac-human-design",
+  "version": "0.1.0",
+  "description": "Reusable macOS-oriented UI primitives and SF Symbols bridge for Tauri apps.",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./components": "./src/components/index.ts",
+    "./theme": "./src/theme/index.ts",
+    "./symbols": "./src/symbols/index.ts",
+    "./tauri": "./src/tauri/index.ts",
+    "./utils": "./src/utils/index.ts",
+    "./rust": "./src-tauri"
+  },
+  "files": [
+    "src/**/*",
+    "src-tauri/**/*",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "tauri",
+    "tauri-plugin",
+    "macos",
+    "sf-symbols",
+    "react",
+    "components"
+  ],
+  "scripts": {
+    "publish": "npm publish --access public"
+  },
+  "author": "human-design",
+  "license": "MIT",
+  "peerDependencies": {
+    "@tauri-apps/api": "^2",
+    "baseui": "^16.1.1",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "styletron-react": "^6.1.1",
+    "styletron-standard": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tauri-apps/api": {
+      "optional": true
+    },
+    "baseui": {
+      "optional": true
+    },
+    "styletron-react": {
+      "optional": true
+    },
+    "styletron-standard": {
+      "optional": true
+    }
+  },
+  "dependencies": {}
+}

package/src/components/AppWindowShell.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { Block } from "baseui/block";
+import { useStyletron } from "baseui";
+
+export function AppWindowShell({ children }: { children: ReactNode }) {
+  const [, theme] = useStyletron();
+
+  return (
+    <Block
+      width="100%"
+      $style={{
+        minHeight: "100vh",
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: theme.colors.backgroundPrimary,
+        color: theme.colors.contentPrimary,
+      }}
+    >
+      <Block flex="1" $style={{ minHeight: 0, display: "flex", flexDirection: "column" }}>
+        {children}
+      </Block>
+    </Block>
+  );
+}

package/src/components/MacSegmentedControl.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from "react";
+import { FILL, Segment, SegmentedControl } from "baseui/segmented-control";
+import {
+  macosSegmentedControlOverrides,
+  macosSegmentOverrides,
+} from "../theme/macosTheme";
+
+export type MacSegmentedControlOption<T extends string> = {
+  value: T;
+  label: ReactNode;
+  disabled?: boolean;
+};
+
+type MacSegmentedControlProps<T extends string> = {
+  options: readonly MacSegmentedControlOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  disabled?: boolean;
+  fullWidth?: boolean;
+};
+
+export function MacSegmentedControl<T extends string>({
+  options,
+  value,
+  onChange,
+  disabled,
+  fullWidth,
+}: MacSegmentedControlProps<T>) {
+  return (
+    <SegmentedControl
+      activeKey={value}
+      disabled={disabled}
+      fill={FILL.fixed}
+      onChange={({ activeKey }) => {
+        const nextOption = options.find((option) => option.value === activeKey);
+        if (!nextOption) {
+          return;
+        }
+        onChange(nextOption.value);
+      }}
+      overrides={macosSegmentedControlOverrides}
+      width={fullWidth ? "100%" : undefined}
+    >
+      {options.map((option) => (
+        <Segment
+          key={option.value}
+          label={option.label}
+          disabled={option.disabled}
+          overrides={macosSegmentOverrides}
+        />
+      ))}
+    </SegmentedControl>
+  );
+}

package/src/components/StatusMessage.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+import { Block } from "baseui/block";
+import { useStyletron } from "baseui";
+
+type StatusMessageProps = {
+  intent: "error" | "success" | "info";
+  message: string;
+};
+
+export function StatusMessage({ intent, message }: StatusMessageProps) {
+  const [, theme] = useStyletron();
+  const isDark = (theme.name ?? "").toLowerCase().includes("dark");
+
+  const palette =
+    intent === "error"
+      ? {
+          background: isDark ? "rgba(255, 84, 89, 0.16)" : "rgba(255, 84, 89, 0.12)",
+          border: isDark ? "rgba(255, 84, 89, 0.45)" : "rgba(255, 84, 89, 0.35)",
+          text: isDark ? "#ff9ea2" : "#8f1c1f",
+        }
+      : intent === "success"
+        ? {
+            background: isDark ? "rgba(52, 199, 89, 0.16)" : "rgba(52, 199, 89, 0.12)",
+            border: isDark ? "rgba(52, 199, 89, 0.45)" : "rgba(52, 199, 89, 0.3)",
+            text: isDark ? "#8ff0ad" : "#0f6b2b",
+          }
+        : {
+            background: isDark ? "rgba(10, 132, 255, 0.16)" : "rgba(10, 132, 255, 0.08)",
+            border: isDark ? "rgba(10, 132, 255, 0.45)" : "rgba(10, 132, 255, 0.25)",
+            text: isDark ? "#9fcbff" : "#0b4e98",
+          };
+
+  return (
+    <Block
+      marginTop="scale400"
+      paddingTop="scale300"
+      paddingRight="scale400"
+      paddingBottom="scale300"
+      paddingLeft="scale400"
+      $style={{
+        backgroundColor: palette.background,
+        border: `1px solid ${palette.border}`,
+        borderRadius: "10px",
+        color: palette.text,
+        fontSize: "13px",
+        lineHeight: "1.35",
+      }}
+    >
+      {message}
+    </Block>
+  );
+}

package/src/components/SymbolIconButton.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { Button, KIND, SIZE } from "baseui/button";
+import { StatefulTooltip } from "baseui/tooltip";
+import { Block } from "baseui/block";
+
+const SYMBOL_SCALE_MULTIPLIER = 2.5;
+const SYMBOL_MIN_POINT_SIZE = 10;
+const SYMBOL_MAX_POINT_SIZE = 160;
+const DEFAULT_SYMBOL_POINT_SIZE = 18;
+
+const systemSymbolIconCache = new Map<string, string | null>();
+
+function getSymbolPointSize(cssPx: number): number {
+  const pixelRatio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+  return Math.round(Math.max(SYMBOL_MIN_POINT_SIZE, Math.min(SYMBOL_MAX_POINT_SIZE, cssPx * pixelRatio * SYMBOL_SCALE_MULTIPLIER)));
+}
+
+function symbolCacheKey(symbolName: string, pointSize: number) {
+  return `${symbolName}@${pointSize}`;
+}
+
+type SymbolIconButtonProps = {
+  label: string;
+  symbolName: string;
+  fallback: string;
+  onClick: () => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+  iconSizePx?: number;
+};
+
+const ICON_BUTTON_SIZE = "30px";
+const ICON_BUTTON_RADIUS = "7px";
+
+export function SymbolIconButton({
+  label,
+  symbolName,
+  fallback,
+  onClick,
+  disabled,
+  isLoading,
+  iconSizePx = 18,
+}: SymbolIconButtonProps) {
+  const symbolPointSize = getSymbolPointSize(iconSizePx);
+  const symbolCacheLookupKey = symbolCacheKey(symbolName, symbolPointSize);
+
+  const [symbolDataUrl, setSymbolDataUrl] = useState<string | null>(() => {
+    return systemSymbolIconCache.get(symbolCacheLookupKey) ?? null;
+  });
+
+  useEffect(() => {
+    const cachedDataUrl = systemSymbolIconCache.get(symbolCacheLookupKey);
+    if (cachedDataUrl !== undefined) {
+      setSymbolDataUrl(cachedDataUrl);
+      return;
+    }
+
+    let isMounted = true;
+    void invoke<string | null>("system_symbol_png_data_url", {
+      name: symbolName,
+      point_size: symbolPointSize,
+    })
+      .then((dataUrl) => {
+        systemSymbolIconCache.set(symbolCacheLookupKey, dataUrl);
+        if (isMounted) {
+          setSymbolDataUrl(dataUrl);
+        }
+      })
+      .catch(() => {
+        systemSymbolIconCache.set(symbolCacheLookupKey, null);
+        if (isMounted) {
+          setSymbolDataUrl(null);
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [symbolName, symbolPointSize, symbolCacheLookupKey]);
+
+  const glyphPx = `${iconSizePx}px`;
+
+  return (
+    <StatefulTooltip content={label}>
+      <Button
+        aria-label={label}
+        title={label}
+        kind={KIND.tertiary}
+        size={SIZE.compact}
+        isLoading={isLoading}
+        disabled={disabled}
+        onClick={onClick}
+        overrides={{
+          BaseButton: {
+            style: {
+              width: ICON_BUTTON_SIZE,
+              minWidth: ICON_BUTTON_SIZE,
+              height: ICON_BUTTON_SIZE,
+              minHeight: ICON_BUTTON_SIZE,
+              borderRadius: ICON_BUTTON_RADIUS,
+              paddingTop: 0,
+              paddingRight: 0,
+              paddingBottom: 0,
+              paddingLeft: 0,
+            },
+          },
+        }}
+      >
+        <Block
+          as="span"
+          aria-hidden
+          $style={{
+            display: "block",
+            width: glyphPx,
+            height: glyphPx,
+            color: "currentColor",
+            backgroundColor: symbolDataUrl ? "currentColor" : "transparent",
+            fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
+            fontSize: symbolDataUrl ? "0" : glyphPx,
+            fontWeight: 500,
+            lineHeight: "1",
+            WebkitMaskImage: symbolDataUrl ? `url("${symbolDataUrl}")` : undefined,
+            WebkitMaskPosition: symbolDataUrl ? "center" : undefined,
+            WebkitMaskRepeat: symbolDataUrl ? "no-repeat" : undefined,
+            WebkitMaskSize: symbolDataUrl ? "contain" : undefined,
+            maskImage: symbolDataUrl ? `url("${symbolDataUrl}")` : undefined,
+            maskPosition: symbolDataUrl ? "center" : undefined,
+            maskRepeat: symbolDataUrl ? "no-repeat" : undefined,
+            maskSize: symbolDataUrl ? "contain" : undefined,
+          }}
+        >
+          {symbolDataUrl ? null : fallback}
+        </Block>
+      </Button>
+    </StatefulTooltip>
+  );
+}

package/src/components/ViewDragRegion.tsx

@@ -0,0 +1,18 @@
+import { Block } from "baseui/block";
+
+type ViewDragRegionProps = {
+  height?: string;
+};
+
+export function ViewDragRegion({ height = "32px" }: ViewDragRegionProps) {
+  return (
+    <Block
+      data-tauri-drag-region
+      $style={{
+        height,
+        minHeight: height,
+        flexShrink: 0,
+      }}
+    />
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export { MacSegmentedControl, type MacSegmentedControlOption } from "./MacSegmentedControl";
+export { StatusMessage } from "./StatusMessage";
+export { SymbolIconButton } from "./SymbolIconButton";
+export { AppWindowShell } from "./AppWindowShell";
+export { ViewDragRegion } from "./ViewDragRegion";

package/src/index.ts

@@ -0,0 +1,18 @@
+export { AppWindowShell } from "./components/AppWindowShell";
+export { MacSegmentedControl, type MacSegmentedControlOption } from "./components/MacSegmentedControl";
+export { SymbolIconButton } from "./components/SymbolIconButton";
+export { StatusMessage } from "./components/StatusMessage";
+export { ViewDragRegion } from "./components/ViewDragRegion";
+export * as macosTheme from "./theme/macosTheme";
+
+export {
+  getSystemSymbolDataUrl,
+  clearSystemSymbolCache,
+  buildSystemSymbolCacheKey,
+  calculateSystemSymbolPointSize,
+  type SystemSymbolFetchOptions,
+} from "./symbols/systemSymbolService";
+export { SystemSymbolImage, type SystemSymbolImageProps } from "./symbols/SystemSymbolImage";
+export { useSystemSymbol } from "./symbols/useSystemSymbol";
+
+export { isDraggableAreaTarget } from "./utils/isDraggableAreaTarget";

package/src/symbols/SystemSymbolImage.tsx

@@ -0,0 +1,72 @@
+import { useMemo } from "react";
+import type { CSSProperties } from "react";
+import { useSystemSymbol } from "./useSystemSymbol";
+
+export type SystemSymbolImageProps = {
+  symbolName: string;
+  fallback?: string;
+  sizePx?: number;
+  ariaLabel?: string;
+  className?: string;
+  style?: CSSProperties;
+  pointSize?: number;
+  enabled?: boolean;
+};
+
+export function SystemSymbolImage({
+  symbolName,
+  fallback = "?",
+  sizePx = 18,
+  ariaLabel,
+  className,
+  style,
+  pointSize,
+  enabled = true,
+}: SystemSymbolImageProps) {
+  const { dataUrl, loading } = useSystemSymbol({
+    symbolName,
+    cssPixelSize: sizePx,
+    options: { fallbackPointSize: pointSize },
+    enabled,
+  });
+
+  const sharedStyles = useMemo<CSSProperties>(() => {
+    const pixels = `${sizePx}px`;
+    return {
+      display: "inline-flex",
+      width: pixels,
+      height: pixels,
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      ...style,
+    };
+  }, [sizePx, style]);
+
+  if (!enabled) {
+    return <span className={className} style={sharedStyles} aria-label={ariaLabel} />;
+  }
+
+  if (loading) {
+    return <span className={className} style={sharedStyles} aria-label={ariaLabel} />;
+  }
+
+  if (!dataUrl) {
+    return (
+      <span
+        className={className}
+        style={{
+          ...sharedStyles,
+          fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
+          fontSize: `${sizePx}px`,
+          lineHeight: "1",
+        }}
+        aria-label={ariaLabel}
+      >
+        {fallback}
+      </span>
+    );
+  }
+
+  return <img className={className} src={dataUrl} alt={ariaLabel ?? symbolName} style={sharedStyles} />;
+}

package/src/symbols/index.ts

@@ -0,0 +1,9 @@
+export {
+  getSystemSymbolDataUrl,
+  clearSystemSymbolCache,
+  buildSystemSymbolCacheKey,
+  calculateSystemSymbolPointSize,
+  type SystemSymbolFetchOptions,
+} from "./systemSymbolService";
+export { SystemSymbolImage, type SystemSymbolImageProps } from "./SystemSymbolImage";
+export { useSystemSymbol } from "./useSystemSymbol";

package/src/symbols/systemSymbolService.ts

@@ -0,0 +1,68 @@
+import { invoke } from "@tauri-apps/api/core";
+
+export type SystemSymbolFetchOptions = {
+  pointSize?: number;
+  fallbackPointSize?: number;
+};
+
+const SYSTEM_SYMBOL_CACHE = new Map<string, string | null>();
+
+const DEFAULT_POINT_SIZE = 18;
+const MIN_POINT_SIZE = 10;
+const MAX_POINT_SIZE = 256;
+const SYMBOL_SCALE_MULTIPLIER = 2.5;
+
+export function calculateSystemSymbolPointSize(
+  cssPx: number,
+  options: { fallbackPointSize?: number } = {},
+): number {
+  const fallback = options.fallbackPointSize ?? DEFAULT_POINT_SIZE;
+  const rawPointSize = Math.max(1, Math.floor(cssPx * SYMBOL_SCALE_MULTIPLIER));
+  const devicePixelRatio =
+    typeof window === "undefined" ? 1 : Math.max(1, window.devicePixelRatio ?? 1);
+
+  if (!Number.isFinite(rawPointSize) || rawPointSize <= 0) {
+    return clampPointSize(fallback * devicePixelRatio);
+  }
+
+  return clampPointSize(Math.round(rawPointSize * devicePixelRatio));
+}
+
+function clampPointSize(value: number): number {
+  return Math.min(MAX_POINT_SIZE, Math.max(MIN_POINT_SIZE, Math.round(value)));
+}
+
+export function buildSystemSymbolCacheKey(symbolName: string, pointSize: number): string {
+  return `${symbolName}@${pointSize}`;
+}
+
+export function clearSystemSymbolCache(): void {
+  SYSTEM_SYMBOL_CACHE.clear();
+}
+
+export async function getSystemSymbolDataUrl(
+  name: string,
+  options: SystemSymbolFetchOptions = {},
+): Promise<string | null> {
+  const pointSize = options.pointSize;
+  const resolvedPointSize = pointSize ?? DEFAULT_POINT_SIZE;
+  const key = buildSystemSymbolCacheKey(name, resolvedPointSize);
+
+  if (SYSTEM_SYMBOL_CACHE.has(key)) {
+    return SYSTEM_SYMBOL_CACHE.get(key) ?? null;
+  }
+
+  try {
+    const maybeDataUrl = await invoke<string | null>("system_symbol_png_data_url", {
+      name,
+      point_size: pointSize,
+    });
+
+    const dataUrl = maybeDataUrl ?? null;
+    SYSTEM_SYMBOL_CACHE.set(key, dataUrl);
+    return dataUrl;
+  } catch (error) {
+    SYSTEM_SYMBOL_CACHE.set(key, null);
+    throw error;
+  }
+}