{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "engine-telegraph", "title": "Engine telegraph", "description": "A ship's engine order telegraph: you set an order, the other side answers by moving its own pointer to match. Both show on one dial, so a pending order is visible at a glance. For autonomy levels, deploy stages and any setting that takes effect only once acknowledged.", "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/engine-telegraph.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Radio } from \"@base-ui/react/radio\"\nimport { RadioGroup } from \"@base-ui/react/radio-group\"\nimport { cn } from \"cn\"\n\ntype Order = { value: string; label: string }\n\ntype EngineTelegraphContextValue = {\n orders: Order[]\n register: (order: Order) => () => void\n value: string\n confirmed: string\n statusId: string\n}\n\nconst EngineTelegraphContext = React.createContext(null)\n\nfunction useEngineTelegraph() {\n const context = React.useContext(EngineTelegraphContext)\n if (!context) throw new Error(\"EngineTelegraph parts must be inside \")\n return context\n}\n\n/* Orders spread over the top of the dial, from -70° to 70°. */\nconst SPREAD = 140\n\nfunction angleOf(orders: Order[], value: string) {\n const i = orders.findIndex((o) => o.value === value)\n if (i === -1 || orders.length < 2) return 0\n return -SPREAD / 2 + (SPREAD * i) / (orders.length - 1)\n}\n\ntype EngineTelegraphProps = Omit, \"onChange\"> & {\n /** The order you've set. */\n value: string\n onValueChange?: (value: string) => void\n /** The order the other side has acknowledged. Differs from value while an order is pending. */\n confirmed: string\n}\n\n/**\n * An engine order telegraph. You set an order; the other side (an agent,\n * a service, a teammate) answers by confirming it. Both pointers show on\n * one dial, so a pending order is visible at a glance.\n */\nfunction EngineTelegraph({ className, value, onValueChange, confirmed, children, ...props }: EngineTelegraphProps) {\n const [orders, setOrders] = React.useState([])\n const statusId = React.useId()\n const register = React.useCallback((order: Order) => {\n // Orders keep the order they mounted in, which is their order on the dial.\n setOrders((all) =>\n all.some((o) => o.value === order.value)\n ? all.map((o) => (o.value === order.value ? order : o))\n : [...all, order]\n )\n return () => setOrders((all) => all.filter((o) => o.value !== order.value))\n }, [])\n const context = React.useMemo(\n () => ({ orders, register, value, confirmed, statusId }),\n [orders, register, value, confirmed, statusId]\n )\n return (\n \n \n onValueChange?.(next as string)}\n aria-describedby={statusId}\n className=\"contents\"\n >\n {children}\n \n \n \n )\n}\n\n/** The dial: your handle and the answering pointer, over the orders. */\nfunction EngineTelegraphDial({ className, ...props }: React.ComponentProps<\"div\">) {\n const { orders, value, confirmed } = useEngineTelegraph()\n return (\n \n
\n \n {orders.map((order) => {\n const angle = angleOf(orders, order.value)\n return (\n \n \n \n {order.label.toUpperCase()}\n \n \n )\n })}\n {/* The answer pointer: short and red, moved by the other side. */}\n \n \n \n {/* Your handle: long and dark, moved by you. */}\n \n \n \n \n \n \n \n
\n \n )\n}\n\n/** The orders you can give: a row of plates. */\nfunction EngineTelegraphOrders({ className, ...props }: React.ComponentProps<\"div\">) {\n return
\n}\n\ntype EngineTelegraphOrderProps = Omit & {\n value: string\n /** Shown on the plate and the dial. Keep it to a word. */\n children: string\n}\n\n/** One order. A radio: arrow keys move between orders. */\nfunction EngineTelegraphOrder({ className, value, children, ...props }: EngineTelegraphOrderProps) {\n const { register, confirmed } = useEngineTelegraph()\n React.useEffect(() => register({ value, label: children }), [value, children, register])\n return (\n \n {children}\n \n )\n}\n\n/** Whether the other side has answered, in words. Announced when that changes. */\nfunction EngineTelegraphStatus({ className, ...props }: React.ComponentProps<\"p\">) {\n const { orders, value, confirmed, statusId } = useEngineTelegraph()\n const label = (v: string) => orders.find((o) => o.value === v)?.label ?? v\n return (\n \n \n {value === confirmed\n ? `Confirmed: ${label(confirmed)}.`\n : `Ordered: ${label(value)}. Waiting for confirmation (now at ${label(confirmed)}).`}\n

\n )\n}\n\nexport { EngineTelegraph, EngineTelegraphDial, EngineTelegraphOrders, EngineTelegraphOrder, EngineTelegraphStatus }\nexport type { EngineTelegraphProps, EngineTelegraphOrderProps }\n", "type": "registry:ui" } ], "css": { ":root": { "--engine-telegraph-answer": "oklch(0.55 0.2 27)", "--engine-telegraph-pending": "oklch(0.78 0.16 75)", "--engine-telegraph-agreed": "oklch(0.72 0.16 150)", "--engine-telegraph-pivot": "50px 56px" }, "[data-slot=\"engine-telegraph\"]": { "--bevel-material": "var(--bevel-brass)", "--bevel-material-edge": "var(--bevel-brass-edge)", "--bevel-led": "var(--engine-telegraph-agreed)" }, "[data-slot=\"engine-telegraph\"][data-pending]": { "--bevel-led": "var(--engine-telegraph-pending)" } }, "categories": [ "instruments" ], "type": "registry:ui" }