@pathmx/react 0.5.0

package/LICENSE.md

@@ -0,0 +1,172 @@
+# PathMX Proprietary Beta License
+
+Version 0.1 — July 21, 2026
+
+Copyright © 2026 DUO Interactive, LLC.
+All rights reserved.
+
+This license governs the first-party PathMX software distributed in the npm
+package `@pathmx/core`, including its command-line interface, bundled
+library surfaces, runtime and Player components, and accompanying
+documentation (the “Software”). DUO Interactive, LLC is the “Licensor.” This
+license does not cover the private PathMX source-code repository or separately
+identified third-party materials.
+
+“Project” means Paths, Sources, responses, data, and other content authored or
+processed with the Software.
+
+“Application” means software or a service created by you in which the Software
+supports product-specific functionality but is not itself offered as a
+general-purpose PathMX product.
+
+“Redistributable Components” means runtime, Player, or library portions of the
+Software incorporated into a Project, Application, or generated output through
+ordinary use of the Software or ordinary compilation and bundling tools.
+
+“Authorized Users” means your employees and individual contractors who use the
+Software on your behalf, and your hosting, continuous-integration, and other
+service providers that possess or run necessary copies solely to provide
+services to you.
+
+## 1. Agreement
+
+By installing, accessing, or using the Software, you agree to this license. If
+you use the Software on behalf of an organization, you represent that you have
+authority to accept this license for that organization. If you do not agree,
+do not install or use the Software.
+
+## 2. License grant
+
+Subject to this license, the Licensor grants you a non-exclusive, worldwide,
+royalty-free, non-transferable, and non-sublicensable license, perpetual for
+the version of the Software to which it applies unless terminated under
+Section 10, to:
+
+- install, execute, and use the Software for personal, educational,
+  internal-business, or commercial purposes;
+- use the Software to author, integrate, build, test, serve, play, host, and
+  operate Projects and Applications;
+- import, compile, bundle, configure, and integrate the Software through its
+  documented library and command-line interfaces;
+- create and distribute independent Projects, Applications, plugins, and
+  integrations that use those interfaces without modifying the Software
+  itself; and
+- make copies reasonably necessary for local development, testing, continuous
+  integration, backup, and hosted production environments.
+
+Your Authorized Users may exercise those rights solely on your behalf. You are
+responsible for their compliance with this license.
+
+You may reproduce and distribute Redistributable Components only as
+incorporated into your Project, Application, or generated output, and only when
+you preserve applicable license and proprietary notices. You may host and
+commercially provide access to that Project, Application, or output. You may
+not distribute Redistributable Components as a standalone package or as a
+general-purpose substitute for the Software.
+
+Each lawful recipient of a Redistributable Component may execute and use that
+component, display its output, and make technically necessary transitory copies
+solely as incorporated into the Project, Application, or output in which they
+received it. This limited recipient permission does not include a right to
+extract, modify, or redistribute the component separately.
+
+## 3. Restrictions
+
+Except where applicable law does not allow the restriction, you may not:
+
+- modify, adapt, translate, or create derivative works of the Software, except
+  for the compilation, bundling, configuration, and integration expressly
+  permitted in Section 2;
+- redistribute, sublicense, sell, lease, or otherwise provide the Software to
+  another person as a standalone package, product, or service except to an
+  Authorized User or as a Redistributable Component under Section 2;
+- resell, rebrand, or provide the Software as a hosted or managed service that
+  gives third parties general-purpose access to substantial PathMX authoring,
+  building, serving, Player-administration, or library functionality for their
+  own unrelated projects;
+- reverse engineer, decompile, disassemble, or otherwise attempt to derive the
+  source code of the Software; or
+- remove or alter copyright, license, trademark, or other proprietary notices.
+
+For clarity, the managed-service restriction does not prohibit a hosted
+Project or Application in which PathMX supports the licensee's own
+product-specific experience and is not itself the general-purpose product
+offered to customers.
+
+## 4. Your content
+
+As between you and the Licensor, you retain ownership of the Paths, Sources,
+responses, data, independent application code, and other content that you
+author or provide while using the Software. You are responsible for that
+content and for having the rights needed to use it.
+
+Generated output may contain Redistributable Components or third-party
+materials. Your ownership of your content does not change the ownership or
+license terms of those components and materials.
+
+## 5. Ownership and trademarks
+
+The Software is licensed, not sold. The Licensor and its suppliers retain all
+rights in the Software not expressly granted by this license. This license
+does not grant permission to use the PathMX name, logos, or other marks except
+as reasonably necessary to identify the Software accurately.
+
+## 6. Beta status and changes
+
+The Software is a proprietary beta release. Its APIs, behavior, file formats,
+and features may change or be removed without notice. The Licensor has no
+obligation to provide support, maintenance, updates, continued availability,
+or backward compatibility. A later version may be offered under different
+license terms, including an open-source license. Different terms for a later
+version do not change the license previously granted for an earlier version.
+
+## 7. Third-party materials
+
+The Software and Redistributable Components may include or depend on
+third-party materials governed by their own license terms. Those terms control
+for the applicable third-party materials. You must preserve third-party notices
+when the applicable third-party terms require it.
+
+## 8. Disclaimer of warranties
+
+TO THE MAXIMUM EXTENT PERMITTED BY LAW, THE SOFTWARE IS PROVIDED “AS IS” AND
+“AS AVAILABLE,” WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EXPRESS,
+IMPLIED, OR STATUTORY, INCLUDING WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE, TITLE, NON-INFRINGEMENT, OR THAT THE SOFTWARE WILL BE
+SECURE, ERROR-FREE, OR UNINTERRUPTED.
+
+## 9. Limitation of liability
+
+TO THE MAXIMUM EXTENT PERMITTED BY LAW, THE LICENSOR AND ITS CONTRIBUTORS,
+SUPPLIERS, AND AFFILIATES WILL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL,
+SPECIAL, CONSEQUENTIAL, EXEMPLARY, OR PUNITIVE DAMAGES, OR FOR LOSS OF DATA,
+PROFITS, REVENUE, GOODWILL, OR BUSINESS OPPORTUNITY, ARISING FROM OR RELATED TO
+THE SOFTWARE OR THIS LICENSE, EVEN IF ADVISED OF THE POSSIBILITY OF THOSE
+DAMAGES.
+
+TO THE MAXIMUM EXTENT PERMITTED BY LAW, THEIR TOTAL LIABILITY FOR ALL CLAIMS
+ARISING FROM OR RELATED TO THE SOFTWARE OR THIS LICENSE WILL NOT EXCEED THE
+GREATER OF THE AMOUNT YOU PAID FOR THE SOFTWARE DURING THE TWELVE MONTHS BEFORE
+THE EVENT GIVING RISE TO THE CLAIM OR US$100.
+
+## 10. Termination
+
+This license terminates if you materially breach it and do not cure the breach
+within thirty days after receiving written notice from the Licensor. On
+termination, you and your Authorized Users must stop using and delete your
+copies of the Software. Sections 4, 5, 8, 9, 10, and 11 survive termination.
+Termination does not withdraw the limited permission already granted by
+Section 2 to lawful recipients of Redistributable Components distributed
+before termination.
+
+## 11. General
+
+If a provision of this license is unenforceable, it will be modified only to
+the minimum extent necessary to make it enforceable, and the remaining
+provisions will continue in effect. Failure to enforce a provision is not a
+waiver. You may not assign or transfer this license without the Licensor's
+written consent. The Licensor may assign this license together with ownership
+of the Software to a successor owner. This license binds and benefits the
+permitted successors and assigns of you and the Licensor. This license is the
+entire agreement concerning the Software unless you and the Licensor have
+signed a separate agreement that expressly replaces it.

package/README.md

@@ -0,0 +1,22 @@
+# `@pathmx/react`
+
+React bindings and shared UI primitives for PathMX applications.
+
+```sh
+pathmx plugins add react
+```
+
+Application integrations import the framework bindings from the package root:
+
+```tsx
+import { PathMXProvider, useActions, useSource } from "@pathmx/react"
+```
+
+Reusable accessible controls are available from the explicit UI subpath:
+
+```tsx
+import { ActionButton, Button } from "@pathmx/react/ui"
+```
+
+This package follows the PathMX CLI release channel and currently requires
+React 19 or newer.

package/index.tsx

@@ -0,0 +1,130 @@
+import { createContext, useCallback, useContext, type ReactNode } from "react"
+import { createRoot, type Root } from "react-dom/client"
+import type {
+  ActionAffordance,
+  SourceDescription,
+  SourceRelation,
+  SourceView,
+} from "@pathmx/core"
+
+export type PathMXReactValue = Readonly<{
+  description: SourceDescription
+  invoke(
+    action: ActionAffordance,
+    input?: Readonly<Record<string, string | readonly string[]>>,
+  ): Promise<Response>
+}>
+
+const PathMXContext = createContext<PathMXReactValue | undefined>(undefined)
+
+function actionBody(
+  action: ActionAffordance,
+  input: Readonly<Record<string, string | readonly string[]>>,
+) {
+  const body = new URLSearchParams({ _target: action.target.id })
+  for (const [name, value] of Object.entries(input)) {
+    if (Array.isArray(value)) {
+      for (const item of value) body.append(name, item)
+    } else {
+      body.set(name, value as string)
+    }
+  }
+  return body
+}
+
+export async function invokePathMXAction(
+  action: ActionAffordance,
+  input: Readonly<Record<string, string | readonly string[]>> = {},
+) {
+  if (action.status !== "available") {
+    throw new Error(action.reason ?? `${action.title} is unavailable.`)
+  }
+  const response = await fetch(action.href, {
+    method: action.method.toUpperCase(),
+    credentials: "same-origin",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: actionBody(action, input),
+  })
+  if (!response.ok) throw new Error(`Action failed (${response.status}).`)
+  document.dispatchEvent(
+    new CustomEvent("pmx:action", { detail: { action: action.id } }),
+  )
+  return response
+}
+
+export function PathMXProvider(
+  props: Readonly<{
+    description: SourceDescription
+    children: ReactNode
+  }>,
+) {
+  const invoke = useCallback<PathMXReactValue["invoke"]>(invokePathMXAction, [])
+  return (
+    <PathMXContext.Provider value={{ description: props.description, invoke }}>
+      {props.children}
+    </PathMXContext.Provider>
+  )
+}
+
+export function usePathMX() {
+  const value = useContext(PathMXContext)
+  if (!value) throw new Error("usePathMX must be used inside PathMXProvider.")
+  return value
+}
+
+export function useSource(): SourceView {
+  return usePathMX().description.source
+}
+
+export function useRelations(): readonly SourceRelation[] {
+  return usePathMX().description.relations
+}
+
+export function useActions(): readonly ActionAffordance[] {
+  return usePathMX().description.actions
+}
+
+export function useAction(id: string) {
+  const context = usePathMX()
+  const action = context.description.actions.find((item) => item.id === id)
+  return {
+    action,
+    invoke: (input?: Readonly<Record<string, string | readonly string[]>>) => {
+      if (!action) throw new Error(`Action not available: ${id}`)
+      return context.invoke(action, input)
+    },
+  }
+}
+
+/** Mount React roots that may appear, update, or leave during PathMX renders. */
+export function mountPathMXApps(
+  selector: string,
+  view: (element: HTMLElement) => ReactNode,
+) {
+  const roots = new Map<HTMLElement, Root>()
+  const reconcile = () => {
+    for (const [element, root] of roots) {
+      if (element.isConnected && element.matches(selector)) continue
+      root.unmount()
+      roots.delete(element)
+    }
+    for (const element of document.querySelectorAll<HTMLElement>(selector)) {
+      let root = roots.get(element)
+      if (!root) {
+        root = createRoot(element)
+        roots.set(element, root)
+      }
+      root.render(view(element))
+    }
+  }
+  reconcile()
+  document.addEventListener("pmx:render", reconcile)
+  return () => {
+    document.removeEventListener("pmx:render", reconcile)
+    for (const root of roots.values()) root.unmount()
+    roots.clear()
+  }
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@pathmx/react",
+  "description": "React bindings and UI primitives for PathMX applications.",
+  "version": "0.5.0",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pathmx/pathmx-beta.git",
+    "directory": "pathmx/react"
+  },
+  "homepage": "https://github.com/pathmx/pathmx-beta#readme",
+  "bugs": "https://github.com/pathmx/pathmx-beta/issues",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "tag": "beta"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./index.tsx",
+    "./ui": "./ui/index.ts"
+  },
+  "engines": {
+    "bun": ">=1.4.0"
+  },
+  "peerDependencies": {
+    "@pathmx/core": "^0.5.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.7.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.34.0"
+  }
+}

package/ui/action-button.tsx

@@ -0,0 +1,57 @@
+import type { ComponentProps, ReactNode } from "react"
+import { Button } from "./button.tsx"
+import { cn } from "./utils.ts"
+
+export type ActionButtonProps = Readonly<{
+  label: string
+  icon: ReactNode
+  appearance?: "plain" | "floating"
+  size?: "sm" | "default"
+  pressed?: boolean
+  disabled?: boolean
+  className?: string
+  tabIndex?: number
+}> &
+  Omit<
+    ComponentProps<typeof Button>,
+    | "aria-label"
+    | "aria-pressed"
+    | "children"
+    | "className"
+    | "disabled"
+    | "size"
+    | "title"
+    | "variant"
+  >
+
+/** Shared accessible icon action for React-owned PathMX Plugin surfaces. */
+export function ActionButton({
+  label,
+  icon,
+  appearance = "plain",
+  size = "default",
+  pressed,
+  disabled,
+  className,
+  tabIndex,
+  ...props
+}: ActionButtonProps) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size={size === "sm" ? "icon-sm" : "icon"}
+      data-slot="action-button"
+      data-appearance={appearance}
+      aria-label={label}
+      aria-pressed={pressed}
+      title={label}
+      disabled={disabled}
+      tabIndex={tabIndex}
+      className={cn("pmx-ui-action-button", className)}
+      {...props}
+    >
+      {icon}
+    </Button>
+  )
+}

package/ui/button.tsx

@@ -0,0 +1,38 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "./utils.ts"
+
+const buttonVariants = cva("pmx-ui-button", {
+  variants: {
+    variant: {
+      default: "pmx-ui-button-default",
+      outline: "pmx-ui-button-outline",
+      ghost: "pmx-ui-button-ghost",
+      destructive: "pmx-ui-button-destructive",
+    },
+    size: {
+      default: "pmx-ui-button-size-default",
+      sm: "pmx-ui-button-size-sm",
+      icon: "pmx-ui-button-size-icon",
+      "icon-sm": "pmx-ui-button-size-icon-sm",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default" },
+})
+
+export function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { buttonVariants }

package/ui/drawer.tsx

@@ -0,0 +1,103 @@
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
+import { createContext, useContext, useMemo, type ComponentProps } from "react"
+import { cn } from "./utils.ts"
+
+const DrawerContext = createContext({ showSwipeHandle: false })
+
+export function Drawer({
+  showSwipeHandle = false,
+  swipeDirection = "down",
+  ...props
+}: DrawerPrimitive.Root.Props & { showSwipeHandle?: boolean }) {
+  const value = useMemo(() => ({ showSwipeHandle }), [showSwipeHandle])
+  return (
+    <DrawerContext.Provider value={value}>
+      <DrawerPrimitive.Root
+        data-slot="drawer"
+        swipeDirection={swipeDirection}
+        {...props}
+      />
+    </DrawerContext.Provider>
+  )
+}
+
+export function DrawerTrigger(props: DrawerPrimitive.Trigger.Props) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+export function DrawerClose(props: DrawerPrimitive.Close.Props) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+export function DrawerContent({
+  className,
+  children,
+  ...props
+}: DrawerPrimitive.Popup.Props) {
+  const { showSwipeHandle } = useContext(DrawerContext)
+  return (
+    <DrawerPrimitive.Portal data-slot="drawer-portal">
+      <DrawerPrimitive.Backdrop
+        data-slot="drawer-overlay"
+        className="pmx-ui-drawer-overlay"
+      />
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        className="pmx-ui-drawer-viewport"
+      >
+        <DrawerPrimitive.Popup
+          data-slot="drawer-popup"
+          data-swipe-axis="y"
+          className={cn("pmx-ui-drawer-popup", className)}
+          {...props}
+        >
+          {showSwipeHandle && (
+            <div data-slot="drawer-swipe-handle" aria-hidden="true" />
+          )}
+          <DrawerPrimitive.Content
+            data-slot="drawer-content"
+            className="pmx-ui-drawer-content"
+          >
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPrimitive.Portal>
+  )
+}
+
+export function DrawerHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn("pmx-ui-drawer-header", className)}
+      {...props}
+    />
+  )
+}
+
+export function DrawerTitle({
+  className,
+  ...props
+}: DrawerPrimitive.Title.Props) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("pmx-ui-drawer-title", className)}
+      {...props}
+    />
+  )
+}
+
+export function DrawerDescription({
+  className,
+  ...props
+}: DrawerPrimitive.Description.Props) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("pmx-ui-visually-hidden", className)}
+      {...props}
+    />
+  )
+}

package/ui/forms.tsx

@@ -0,0 +1,86 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+import {
+  createContext,
+  useContext,
+  type ComponentProps,
+  type CSSProperties,
+} from "react"
+import { cn } from "./utils.ts"
+
+export function Label({ className, ...props }: ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn("pmx-ui-label", className)}
+      {...props}
+    />
+  )
+}
+
+export function Switch({ className, ...props }: SwitchPrimitive.Root.Props) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn("pmx-ui-switch", className)}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb data-slot="switch-thumb" />
+    </SwitchPrimitive.Root>
+  )
+}
+
+const ToggleGroupContext = createContext({ spacing: 2 })
+
+export function ToggleGroup({
+  className,
+  spacing = 2,
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props & { spacing?: number }) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-spacing={spacing}
+      style={{ "--pmx-ui-group-gap": spacing } as CSSProperties}
+      className={cn("pmx-ui-toggle-group", className)}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  )
+}
+
+export function ToggleGroupItem({
+  className,
+  ...props
+}: TogglePrimitive.Props) {
+  const { spacing } = useContext(ToggleGroupContext)
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      data-spacing={spacing}
+      className={cn("pmx-ui-toggle-group-item", className)}
+      {...props}
+    />
+  )
+}
+
+export function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn("pmx-ui-separator", className)}
+      {...props}
+    />
+  )
+}

package/ui/index.ts

@@ -0,0 +1,9 @@
+import "./ui.css"
+
+export * from "./action-button.tsx"
+export * from "./button.tsx"
+export * from "./drawer.tsx"
+export * from "./forms.tsx"
+export * from "./popover.tsx"
+export * from "./select.tsx"
+export * from "./tooltip.tsx"

package/ui/popover.tsx

@@ -0,0 +1,78 @@
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import type { ComponentProps } from "react"
+import { cn } from "./utils.ts"
+
+export function Popover(props: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+export function PopoverTrigger(props: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+export function PopoverContent({
+  className,
+  align = "end",
+  alignOffset = 0,
+  side = "top",
+  sideOffset = 12,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="pmx-ui-positioner"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn("pmx-ui-popover-content", className)}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export function PopoverHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("pmx-ui-popover-header", className)}
+      {...props}
+    />
+  )
+}
+
+export function PopoverTitle({
+  className,
+  ...props
+}: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn("pmx-ui-popover-title", className)}
+      {...props}
+    />
+  )
+}
+
+export function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("pmx-ui-visually-hidden", className)}
+      {...props}
+    />
+  )
+}

package/ui/select.tsx

@@ -0,0 +1,81 @@
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+import { Check, ChevronDown } from "lucide-react"
+import { cn } from "./utils.ts"
+
+export const Select = SelectPrimitive.Root
+
+export function SelectValue(props: SelectPrimitive.Value.Props) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+export function SelectTrigger({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn("pmx-ui-select-trigger", className)}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={<ChevronDown aria-hidden="true" size={17} />}
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+export function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 6,
+  align = "end",
+  alignItemWithTrigger = false,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "side" | "sideOffset" | "align" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="pmx-ui-positioner"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          className={cn("pmx-ui-select-content", className)}
+          {...props}
+        >
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+export function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn("pmx-ui-select-item", className)}
+      {...props}
+    >
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator data-slot="select-item-indicator">
+        <Check aria-hidden="true" size={16} />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}

package/ui/tooltip.tsx

@@ -0,0 +1,51 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+import { cn } from "./utils.ts"
+
+export function TooltipProvider({
+  delay = 350,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+export function Tooltip(props: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+export function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+export function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 7,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<TooltipPrimitive.Positioner.Props, "side" | "sideOffset">) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        className="pmx-ui-positioner"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn("pmx-ui-tooltip-content", className)}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow data-slot="tooltip-arrow" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}

package/ui/ui.css

@@ -0,0 +1,422 @@
+:where([data-slot="button"], [data-slot="action-button"]) {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  border: 0;
+  font: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
+  transition:
+    color 160ms ease,
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+:where([data-slot="button"], [data-slot="action-button"]):disabled {
+  cursor: default;
+  opacity: 0.42;
+}
+
+:where([data-slot="button"], [data-slot="action-button"]):focus-visible,
+:where(
+  [data-slot="select-trigger"],
+  [data-slot="switch"],
+  [data-slot="toggle-group-item"]
+):focus-visible {
+  outline: 2px solid var(--pmx-ui-accent, var(--pmx-color-accent, #3897ff));
+  outline-offset: 2px;
+}
+
+.pmx-ui-button-default,
+.pmx-ui-button-outline {
+  min-height: 2.5rem;
+  padding-inline: 0.9rem;
+  border-radius: 0.6rem;
+}
+
+.pmx-ui-button-default {
+  color: var(--pmx-ui-on-accent, var(--pmx-color-bg, white));
+  background: var(--pmx-ui-accent, var(--pmx-color-accent, #2563eb));
+}
+
+.pmx-ui-button-outline {
+  color: inherit;
+  border: 1px solid var(--pmx-ui-border, var(--pmx-color-border, #d4d4d8));
+  background: var(--pmx-ui-surface, var(--pmx-color-surface, Canvas));
+}
+
+.pmx-ui-button-ghost {
+  color: inherit;
+  background: transparent;
+}
+
+.pmx-ui-button-destructive {
+  min-height: 2.5rem;
+  padding-inline: 0.9rem;
+  color: var(--pmx-ui-on-destructive, white);
+  background: var(--pmx-ui-destructive, var(--pmx-color-danger, #b91c1c));
+}
+
+.pmx-ui-button-size-default {
+  min-height: 2.5rem;
+}
+
+.pmx-ui-button-size-sm {
+  min-height: 2.25rem;
+}
+
+.pmx-ui-button-size-icon,
+.pmx-ui-button-size-icon-sm {
+  padding: 0;
+  border-radius: 999px;
+}
+
+.pmx-ui-button-size-icon {
+  width: 2.75rem;
+  height: 2.75rem;
+}
+
+.pmx-ui-button-size-icon-sm {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.pmx-ui-action-button {
+  border: 1px solid transparent;
+}
+
+.pmx-ui-action-button[data-appearance="floating"] {
+  color: var(--pmx-ui-fg, var(--pmx-color-fg, CanvasText));
+  border-color: var(--pmx-ui-border, var(--pmx-color-border, #d4d4d8));
+  background: var(--pmx-ui-surface, var(--pmx-color-surface, Canvas));
+  box-shadow: 0 4px 12px rgb(0 0 0 / 14%);
+}
+
+.pmx-ui-action-button:hover,
+.pmx-ui-action-button[aria-pressed="true"] {
+  color: var(--pmx-ui-accent, var(--pmx-color-accent, #2563eb));
+  background: color-mix(
+    in oklab,
+    currentColor 10%,
+    var(--pmx-ui-surface, var(--pmx-color-surface, Canvas))
+  );
+}
+
+.pmx-ui-action-button svg {
+  width: 1.2rem;
+  height: 1.2rem;
+  stroke-width: 1.8;
+}
+
+.pmx-ui-positioner {
+  z-index: 1002;
+}
+
+.pmx-ui-popover-content,
+.pmx-ui-select-content,
+.pmx-ui-drawer-popup {
+  box-sizing: border-box;
+  color: var(--pmx-ui-fg, var(--pmx-color-fg, CanvasText));
+  border: 1px solid var(--pmx-ui-border, var(--pmx-color-border, #d4d4d8));
+  background: var(--pmx-ui-surface, var(--pmx-color-surface, Canvas));
+  box-shadow: 0 6px 20px rgb(0 0 0 / 16%);
+}
+
+.pmx-ui-popover-content {
+  width: min(22.5rem, calc(100vw - 2rem));
+  padding: 1rem;
+  border-radius: 0.625rem;
+  transform-origin: var(--transform-origin);
+  transition:
+    opacity 160ms ease,
+    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.pmx-ui-popover-content[data-starting-style],
+.pmx-ui-popover-content[data-ending-style] {
+  opacity: 0;
+  transform: translateY(0.35rem) scale(0.97);
+}
+
+.pmx-ui-popover-header {
+  margin-block-end: 0.75rem;
+}
+
+.pmx-ui-popover-title,
+.pmx-ui-drawer-title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 650;
+}
+
+.pmx-ui-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.pmx-ui-drawer-overlay {
+  position: fixed;
+  z-index: 1000;
+  inset: 0;
+  min-height: 100dvh;
+  background: rgb(0 0 0 / 44%);
+  opacity: calc(1 - var(--drawer-swipe-progress, 0));
+  transition: opacity 240ms ease;
+  touch-action: none;
+}
+
+.pmx-ui-drawer-overlay[data-starting-style],
+.pmx-ui-drawer-overlay[data-ending-style] {
+  opacity: 0;
+}
+
+.pmx-ui-drawer-viewport {
+  position: fixed;
+  z-index: 1001;
+  inset: 0;
+  pointer-events: none;
+}
+
+.pmx-ui-drawer-popup {
+  --pmx-drawer-translate: calc(
+    var(--drawer-swipe-movement-y, 0px) + var(--drawer-snap-point-offset, 0px)
+  );
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  display: flex;
+  max-height: calc(100dvh - 2rem);
+  margin: 0;
+  overflow: hidden;
+  border-radius: 0.75rem 0.75rem 0 0;
+  pointer-events: auto;
+  outline: none;
+  transform: translate3d(0, var(--pmx-drawer-translate), 0);
+  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
+  touch-action: none;
+}
+
+.pmx-ui-drawer-popup[data-starting-style],
+.pmx-ui-drawer-popup[data-ending-style] {
+  transform: translate3d(0, 100%, 0);
+}
+
+.pmx-ui-drawer-popup[data-swiping] {
+  transition: none;
+}
+
+[data-slot="drawer-swipe-handle"] {
+  position: absolute;
+  z-index: 1;
+  top: 0.75rem;
+  left: 50%;
+  width: 2.4rem;
+  height: 0.28rem;
+  border-radius: 999px;
+  background: var(--pmx-ui-border, var(--pmx-color-border, #d4d4d8));
+  transform: translateX(-50%);
+}
+
+.pmx-ui-drawer-content {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+  overscroll-behavior: contain;
+}
+
+.pmx-ui-drawer-header {
+  flex: none;
+  padding: 1.7rem 1.25rem 0.5rem;
+}
+
+.pmx-ui-select-trigger {
+  box-sizing: border-box;
+  display: inline-flex;
+  width: 100%;
+  min-height: 2.45rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-inline: 0.75rem;
+  color: inherit;
+  border: 1px solid var(--pmx-ui-border, var(--pmx-color-border, #d4d4d8));
+  border-radius: 0.5rem;
+  background: var(--pmx-ui-bg, var(--pmx-color-bg, Canvas));
+  font: inherit;
+  cursor: pointer;
+}
+
+.pmx-ui-select-content {
+  min-width: var(--anchor-width);
+  max-height: min(20rem, var(--available-height));
+  padding: 0.3rem;
+  overflow-y: auto;
+  border-radius: 0.65rem;
+  transform-origin: var(--transform-origin);
+}
+
+.pmx-ui-select-item {
+  position: relative;
+  display: flex;
+  min-height: 2.35rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.45rem 2rem 0.45rem 0.65rem;
+  border-radius: 0.42rem;
+  cursor: default;
+  outline: none;
+}
+
+.pmx-ui-select-item[data-highlighted] {
+  color: var(--pmx-ui-fg, var(--pmx-color-fg, CanvasText));
+  background: color-mix(
+    in oklab,
+    var(--pmx-ui-fg, var(--pmx-color-fg, CanvasText)) 8%,
+    transparent
+  );
+}
+
+[data-slot="select-item-indicator"] {
+  position: absolute;
+  right: 0.55rem;
+}
+
+.pmx-ui-label {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  font: inherit;
+  user-select: none;
+}
+
+.pmx-ui-switch {
+  position: relative;
+  display: inline-flex;
+  width: 2.45rem;
+  height: 1.4rem;
+  flex: none;
+  align-items: center;
+  padding: 0.12rem;
+  border: 0;
+  border-radius: 999px;
+  border: 1px solid var(--pmx-ui-border, var(--pmx-color-border, #d4d4d8));
+  background: var(--pmx-ui-border, var(--pmx-color-border, #d4d4d8));
+  cursor: pointer;
+  transition: background-color 160ms ease;
+}
+
+.pmx-ui-switch[data-checked] {
+  background: var(--pmx-ui-accent, #3897ff);
+}
+
+[data-slot="switch-thumb"] {
+  display: block;
+  width: 1.15rem;
+  height: 1.15rem;
+  border-radius: 999px;
+  background: var(--pmx-ui-surface, var(--pmx-color-surface, white));
+  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
+  transform: translateX(0);
+  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.pmx-ui-switch[data-checked] [data-slot="switch-thumb"] {
+  transform: translateX(1.05rem);
+}
+
+.pmx-ui-toggle-group {
+  display: flex;
+  width: 100%;
+  gap: calc(var(--pmx-ui-group-gap, 0) * 0.25rem);
+}
+
+.pmx-ui-toggle-group-item {
+  min-height: 2.35rem;
+  flex: 1;
+  padding: 0.4rem 0.7rem;
+  color: inherit;
+  border: 1px solid var(--pmx-ui-border, var(--pmx-color-border, #d4d4d8));
+  background: var(--pmx-ui-bg, var(--pmx-color-bg, Canvas));
+  font: inherit;
+  cursor: pointer;
+}
+
+.pmx-ui-toggle-group-item:first-child {
+  border-radius: 0.48rem 0 0 0.48rem;
+}
+
+.pmx-ui-toggle-group-item:last-child {
+  border-radius: 0 0.48rem 0.48rem 0;
+}
+
+.pmx-ui-toggle-group-item:not(:first-child) {
+  margin-inline-start: -1px;
+}
+
+.pmx-ui-toggle-group-item[data-pressed] {
+  position: relative;
+  z-index: 1;
+  color: var(--pmx-ui-accent, #3897ff);
+  border-color: currentColor;
+  background: color-mix(in oklab, currentColor 8%, transparent);
+}
+
+.pmx-ui-separator {
+  display: block;
+  width: 100%;
+  height: 1px;
+  flex: none;
+  background: var(--pmx-ui-border, var(--pmx-color-border, #d4d4d8));
+}
+
+.pmx-ui-tooltip-content {
+  max-width: 15rem;
+  padding: 0.35rem 0.5rem;
+  color: var(--pmx-ui-bg, var(--pmx-color-bg, Canvas));
+  border-radius: 0.35rem;
+  background: var(--pmx-ui-fg, var(--pmx-color-fg, CanvasText));
+  box-shadow: 0 4px 12px rgb(0 0 0 / 16%);
+  font:
+    600 0.72rem/1.2 system-ui,
+    sans-serif;
+}
+
+[data-slot="tooltip-arrow"] {
+  width: 0.5rem;
+  height: 0.5rem;
+  background: var(--pmx-ui-fg, var(--pmx-color-fg, CanvasText));
+  transform: rotate(45deg);
+}
+
+@media (pointer: coarse) {
+  .pmx-ui-button-size-icon-sm,
+  .pmx-ui-button-size-icon {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-slot="button"], [data-slot="action-button"]),
+  .pmx-ui-popover-content,
+  .pmx-ui-drawer-overlay,
+  .pmx-ui-drawer-popup,
+  [data-slot="switch-thumb"] {
+    transition: none;
+  }
+}

package/ui/utils.ts

@@ -0,0 +1,5 @@
+import { clsx, type ClassValue } from "clsx"
+
+export function cn(...values: ClassValue[]) {
+  return clsx(values)
+}