mac-human-design 0.1.3 → 0.1.6

package/README.md

@@ -1,8 +1,10 @@
-# human-design
+# mac-human-design
 
 A reusable shared library for Tauri macOS apps. It includes:
 
-- `MacSegmentedControl` and macOS-focused BaseUI theme tokens.
+- macOS-styled wrappers for every public `@base-ui/react` component family.
+- Default-on Motion-powered animations that respect reduced-motion settings.
+- `MacSegmentedControl` and macOS design tokens/classes.
 - 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`.
@@ -10,6 +12,7 @@ A reusable shared library for Tauri macOS apps. It includes:
 ## Structure
 
 - `src/` - TypeScript/React library exports
+- `docs/macos-base-ui-coverage.md` - Base UI component coverage and variants
 - `src-tauri/` - Rust plugin crate (`human-design-tauri-system-symbols`)
 
 ## Install
@@ -17,7 +20,18 @@ A reusable shared library for Tauri macOS apps. It includes:
 From the consumer app:
 
 ```bash
-npm i human-design
+npm i mac-human-design @base-ui/react motion react react-dom
+```
+
+`@base-ui/react`, `motion`, `react`, and `react-dom` are peer dependencies.
+Install `@tauri-apps/api` too when using the SF Symbols helpers or Tauri
+integration.
+
+Consumer apps should also include the macOS Base UI stylesheet once near their
+app root:
+
+```ts
+import "mac-human-design/styles/macos-base-ui.css";
 ```
 
 In the Tauri Rust side, add the local path dependency while developing:
@@ -42,14 +56,15 @@ fn main() {
 
 ```ts
 import { useState } from "react";
-import { MacSegmentedControl } from "human-design";
-import { SystemSymbolImage } from "human-design/symbols";
+import { MacButton, MacMotionProvider, MacSegmentedControl, MacSelect } from "mac-human-design";
+import { SystemSymbolImage } from "mac-human-design/symbols";
+import "mac-human-design/styles/macos-base-ui.css";
 
 export function Demo() {
   const [tab, setTab] = useState<"files" | "settings">("files");
 
   return (
-    <div>
+    <MacMotionProvider>
       <SystemSymbolImage symbolName="folder" sizePx={18} fallback="▢" />
       <MacSegmentedControl
         options={[
@@ -59,18 +74,50 @@ export function Demo() {
         value={tab}
         onChange={setTab}
       />
-    </div>
+      <MacButton data-variant="primary">Continue</MacButton>
+      <MacSelect.Root items={[{ label: "Files", value: "files" }]}>
+        <MacSelect.Trigger>
+          <MacSelect.Value placeholder="Choose" />
+        </MacSelect.Trigger>
+      </MacSelect.Root>
+    </MacMotionProvider>
   );
 }
 ```
 
+## Verify
+
+```bash
+npm run check
+npm run dev:gallery -- --port 5177
+```
+
 ## Why it works cross-platform
 
+The React components stay browser-safe. The optional Tauri plugin is the only
+native layer:
+
+- On macOS, Rust command renders the symbol to PNG via `NSImage`.
+- On non-macOS, command returns `None` so invocations stay safe and predictable.
+
 ## Shared UI components moved in
 
 The following components are now in the shared library and can be imported by any app:
 
 - `AppWindowShell`
+- `MacAccordion`, `MacAlertDialog`, `MacAutocomplete`, `MacAvatar`,
+  `MacButton`, `MacPrimaryButton`, `MacSecondaryButton`,
+  `MacDestructiveButton`, `MacPlainButton`, `MacIconButton`,
+  `MacHelpButton`, `MacCheckbox`, `MacCheckboxGroup`, `MacCollapsible`,
+  `MacCombobox`, `MacContextMenu`, `MacDialog`, `MacDrawer`, `MacField`,
+  `MacFieldset`, `MacForm`, `MacInput`, `MacTextField`, `MacSearchField`,
+  `MacMenu`, `MacMenubar`, `MacMeter`, `MacMotionProvider`, `MacNavigationMenu`,
+  `MacNumberField`, `MacOTPField`, `MacPopover`,
+  `MacPreviewCard`, `MacProgress`, `MacRadio`, `MacRadioGroup`,
+  `MacScrollArea`, `MacSelect`, `MacSeparator`, `MacSlider`, `MacSwitch`,
+  `MacTabs`, `MacToast`, `MacToggle`, `MacToolbarToggle`,
+  `MacToggleGroup`, `MacSegmentedToggleGroup`,
+  `MacSeparatedSegmentedToggleGroup`, `MacToolbar`, `MacTooltip`
 - `StatusMessage`
 - `SymbolIconButton`
 - `ViewDragRegion`
@@ -85,8 +132,5 @@ import {
   SymbolIconButton,
   ViewDragRegion,
   isDraggableAreaTarget,
-} from "human-design";
+} from "mac-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/changelog.md

@@ -0,0 +1,77 @@
+# Changelog
+
+This file tracks changes between published npm versions of `mac-human-design`.
+
+## 0.1.6
+
+### Added
+
+- Added Motion for React as the default animation layer for the macOS Base UI
+  wrappers.
+- Added `MacMotionProvider`, which applies the shared Motion transition config
+  and respects the user's reduced-motion preference by default.
+- Added default macOS motion presets for controls, fields, selection controls,
+  panels, popups, dialogs, drawers, indicators, feedback meters, and utility
+  surfaces.
+- Added verifier coverage for Motion peer/dev dependencies, provider export,
+  reduced-motion config, default transitions, and safe module-scope
+  `motion.create()` usage.
+
+### Changed
+
+- Bumped the package to `0.1.6`.
+- Added `motion` as a required peer dependency and development dependency.
+- Updated the gallery to render inside `MacMotionProvider` so animation defaults
+  are exercised by the shipped example app.
+
+## 0.1.5
+
+### Changed
+
+- Replaced the previous Base Web `baseui` foundation with `@base-ui/react`.
+- Updated the package peer dependencies so consumers install `@base-ui/react`,
+  `react`, and `react-dom` alongside `mac-human-design`.
+- Updated README and coverage documentation to use the published package name
+  `mac-human-design` in install and import examples.
+
+### Added
+
+- Added macOS-styled wrappers for every public renderable `@base-ui/react`
+  component family in version 1.5.0:
+  `Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Button`,
+  `Checkbox`, `CheckboxGroup`, `Collapsible`, `Combobox`, `ContextMenu`,
+  `CSPProvider`, `Dialog`, `DirectionProvider`, `Drawer`, `Field`,
+  `Fieldset`, `Form`, `Input`, `Menu`, `Menubar`, `Meter`,
+  `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`,
+  `Progress`, `Radio`, `RadioGroup`, `ScrollArea`, `Select`, `Separator`,
+  `Slider`, `Switch`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`,
+  and `Tooltip`.
+- Added macOS-native variants for common platform control styles, including
+  primary, secondary, destructive, plain, icon, and help buttons; text and
+  search fields; pop-up and pull-down select triggers; segmented controls;
+  toolbar buttons; sheet dialogs; and sidebar drawers.
+- Added `src/styles/macosBaseUi.css`, which defines the macOS control styling,
+  system font stack, light/dark tokens, focus rings, reduced-motion behavior,
+  popup/menu/dialog surfaces, and state styling used by the wrappers.
+- Added `MacBaseUIGallery` and a Vite example app at
+  `examples/macos-base-ui-gallery` to visually exercise the wrapped component
+  families and variants.
+- Added `docs/macos-base-ui-coverage.md` to document Base UI family coverage,
+  intentional utility exclusions, native variants, and verification commands.
+- Added verification scripts for Base UI coverage, macOS design constraints,
+  gallery buildability, CSS selector coverage, stale Base Web references, and
+  npm package contents.
+
+### Removed
+
+- Removed the old `baseui` dependency path from package metadata, source,
+  docs, examples, and the lockfile.
+- Removed any dependency on Base Web or Styletron as the shared UI foundation.
+
+### Verification
+
+- `npm run check` typechecks the package, verifies all public Base UI component
+  wrappers and namespace parts, validates macOS design constraints, and builds
+  the gallery.
+- `npm pack --dry-run --json` confirms the npm package includes source, styles,
+  docs, examples, scripts, README, license, and this changelog.

package/docs/macos-base-ui-coverage.md

@@ -0,0 +1,119 @@
+# macOS Base UI Coverage
+
+`mac-human-design` wraps every public component family exported by `@base-ui/react`
+1.5.0 with macOS-oriented class names. Import the CSS once:
+
+```ts
+import "mac-human-design/styles/macos-base-ui.css";
+```
+
+Consumer apps install `@base-ui/react`, `motion`, `react`, and `react-dom` as
+peer dependencies alongside this package. Motion animations are enabled by
+default through the macOS wrappers and respect the user's reduced-motion
+preference through `MacMotionProvider`.
+
+## Component Families
+
+| Base UI family | macOS export |
+| --- | --- |
+| `accordion` | `MacAccordion` |
+| `alert-dialog` | `MacAlertDialog` |
+| `autocomplete` | `MacAutocomplete` |
+| `avatar` | `MacAvatar` |
+| `button` | `MacButton` |
+| `checkbox` | `MacCheckbox` |
+| `checkbox-group` | `MacCheckboxGroup` |
+| `collapsible` | `MacCollapsible` |
+| `combobox` | `MacCombobox` |
+| `context-menu` | `MacContextMenu` |
+| `csp-provider` | `MacCSPProvider` |
+| `dialog` | `MacDialog` |
+| `direction-provider` | `MacDirectionProvider` |
+| `drawer` | `MacDrawer` |
+| `field` | `MacField` |
+| `fieldset` | `MacFieldset` |
+| `form` | `MacForm` |
+| `input` | `MacInput` |
+| `menu` | `MacMenu` |
+| `menubar` | `MacMenubar` |
+| `meter` | `MacMeter` |
+| `navigation-menu` | `MacNavigationMenu` |
+| `number-field` | `MacNumberField` |
+| `otp-field` | `MacOTPField` |
+| `popover` | `MacPopover` |
+| `preview-card` | `MacPreviewCard` |
+| `progress` | `MacProgress` |
+| `radio` | `MacRadio` |
+| `radio-group` | `MacRadioGroup` |
+| `scroll-area` | `MacScrollArea` |
+| `select` | `MacSelect` |
+| `separator` | `MacSeparator` |
+| `slider` | `MacSlider` |
+| `switch` | `MacSwitch` |
+| `tabs` | `MacTabs` |
+| `toast` | `MacToast` |
+| `toggle` | `MacToggle` |
+| `toggle-group` | `MacToggleGroup` |
+| `toolbar` | `MacToolbar` |
+| `tooltip` | `MacTooltip` |
+
+Support exports such as `merge-props`, `use-render`, and
+`unstable-use-media-query` are intentionally not wrapped because they do not
+render UI.
+
+## Native Variants
+
+| Native role | Export |
+| --- | --- |
+| Default push button | `MacButton` |
+| Blue default button | `MacPrimaryButton` |
+| Secondary push button | `MacSecondaryButton` |
+| Destructive button | `MacDestructiveButton` |
+| Borderless button | `MacPlainButton` |
+| Icon button | `MacIconButton` |
+| Help button | `MacHelpButton` |
+| Motion defaults provider | `MacMotionProvider` |
+| Text field | `MacTextField` / `MacInput` |
+| Search field | `MacSearchField` |
+| Pop-up button | `MacSelect.PopUpButtonTrigger` |
+| Pull-down button | `MacSelect.PullDownButtonTrigger` |
+| Segmented control | `MacSegmentedToggleGroup` |
+| Separated segmented control | `MacSeparatedSegmentedToggleGroup` |
+| Toolbar toggle | `MacToolbarToggle` |
+| Toolbar icon button | `MacToolbar.IconButton` |
+| Window sheet | `MacDialog.SheetPopup` |
+| Sidebar drawer | `MacDrawer.SidebarPopup` |
+
+The gallery at `examples/macos-base-ui-gallery` renders these wrappers across
+normal, selected, disabled, mixed, popup, dialog, and narrow-width states.
+
+## Verification
+
+Run the full local gate before publishing wrapper changes:
+
+```bash
+npm run check
+```
+
+The gate typechecks the library and verifies:
+
+- every public `@base-ui/react` component family has a `Mac...` wrapper export,
+- every renderable namespace part in each wrapped family has a matching macOS part,
+- every component family is listed in this coverage document,
+- required native variants are exported,
+- nested native variant parts such as pop-up buttons, sheets, and sidebar drawers are exported,
+- every class assigned by the wrapper module has a matching CSS selector,
+- every public wrapper export is represented in the visual gallery source,
+- macOS design features are present: system font stack, dark mode, reduced motion,
+  keyboard focus rings, accent tokens, styled `hd-mac` classes, and typography
+  constraints,
+- Motion integration is present: dependency declarations, `MacMotionProvider`,
+  reduced-motion config, default transitions, and module-scope `motion.create()`,
+- the visual gallery can be bundled for production from the shipped source,
+- old UI-foundation references have not returned.
+
+Run the visual gallery with:
+
+```bash
+npm run dev:gallery -- --port 5177
+```

package/examples/macos-base-ui-gallery/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>human-design macOS Base UI gallery</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/examples/macos-base-ui-gallery/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { AppWindowShell, MacBaseUIGallery } from "../../../src";
+import "../../../src/styles/macosBaseUi.css";
+import "../../../src/styles/macosTauri.css";
+
+createRoot(document.getElementById("root") as HTMLElement).render(
+  <StrictMode>
+    <AppWindowShell>
+      <MacBaseUIGallery />
+    </AppWindowShell>
+  </StrictMode>,
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mac-human-design",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "description": "Reusable macOS-oriented UI primitives and SF Symbols bridge for Tauri apps.",
   "type": "module",
   "main": "src/index.ts",
@@ -11,10 +11,17 @@
     "./theme": "./src/theme/index.ts",
     "./symbols": "./src/symbols/index.ts",
     "./tauri": "./src/tauri/index.ts",
+    "./tauri/macos-window-config": "./src/tauri/macosWindowConfig.ts",
+    "./styles/macos-base-ui.css": "./src/styles/macosBaseUi.css",
     "./utils": "./src/utils/index.ts",
+    "./styles/macos-tauri.css": "./src/styles/macosTauri.css",
     "./rust": "./src-tauri"
   },
   "files": [
+    "changelog.md",
+    "docs/**/*",
+    "examples/**/*",
+    "scripts/**/*",
     "src/**/*",
     "src-tauri/**/*",
     "README.md",
@@ -29,31 +36,38 @@
     "components"
   ],
   "scripts": {
-    "publish": "npm publish --access public --ignore-scripts"
+    "check": "npm run typecheck && npm run verify:base-ui && npm run verify:design && npm run verify:gallery",
+    "dev:gallery": "vite --host 127.0.0.1 examples/macos-base-ui-gallery",
+    "publish": "npm publish --access public --ignore-scripts",
+    "typecheck": "tsc --noEmit",
+    "verify:base-ui": "node scripts/verify-base-ui-coverage.mjs",
+    "verify:design": "node scripts/verify-macos-design.mjs",
+    "verify:gallery": "rm -rf .verify/macos-base-ui-gallery && vite build examples/macos-base-ui-gallery --outDir ../../.verify/macos-base-ui-gallery --emptyOutDir && rm -rf .verify/macos-base-ui-gallery"
   },
   "author": "human-design",
   "license": "MIT",
   "peerDependencies": {
+    "@base-ui/react": "^1.5.0",
     "@tauri-apps/api": "^2",
-    "baseui": ">=18",
+    "motion": "^12.40.0",
     "react": ">=18",
-    "react-dom": ">=18",
-    "styletron-react": "^6.1.1",
-    "styletron-standard": "^3.1.0"
+    "react-dom": ">=18"
   },
   "peerDependenciesMeta": {
     "@tauri-apps/api": {
       "optional": true
-    },
-    "baseui": {
-      "optional": true
-    },
-    "styletron-react": {
-      "optional": true
-    },
-    "styletron-standard": {
-      "optional": true
     }
   },
-  "dependencies": {}
+  "devDependencies": {
+    "@base-ui/react": "^1.5.0",
+    "@tauri-apps/api": "^2.11.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "motion": "^12.40.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  }
 }