@xenosystem/components 0.10.0 → 0.10.2

package/dist/catalog.json

@@ -763,6 +763,18 @@
               "optional": true,
               "doc": "Accessible name; the figure is read as text."
             },
+            {
+              "name": "onClick",
+              "type": "() => void",
+              "optional": true,
+              "doc": "Clickable readouts cycle their display (timecode → frames → seconds); the unit becomes a button."
+            },
+            {
+              "name": "title",
+              "type": "string",
+              "optional": true,
+              "doc": "Native tooltip for a clickable readout (\"Click to change time display\")."
+            },
             {
               "name": "className",
               "type": "string",

package/dist/chrome/index.d.ts

@@ -94,7 +94,7 @@ interface ScrollAreaProps {
  */
 declare function ScrollArea({ children, className }: ScrollAreaProps): ReactNode;
 /** Props for {@link Column}. */
-interface ColumnProps {
+interface ColumnProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
 }
@@ -104,7 +104,7 @@ interface ColumnProps {
  * 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>` by hand; as a unit it is the root
  * a declaration can name.
  */
-declare function Column({ children, className }: ColumnProps): ReactNode;
+declare function Column({ children, className, ...rest }: ColumnProps): ReactNode;
 /** Props for {@link Stack}. */
 interface StackProps {
     children?: ReactNode;
@@ -731,10 +731,14 @@ interface ReadoutProps {
     size?: 'sm' | 'md';
     /** Accessible name; the figure is read as text. */
     label?: string;
+    /** Clickable readouts cycle their display (timecode → frames → seconds); the unit becomes a button. */
+    onClick?: () => void;
+    /** Native tooltip for a clickable readout ("Click to change time display"). */
+    title?: string;
     className?: string;
 }
 /** A value with its unit — the transport's position, a timeline's duration, a calendar's week number. */
-declare function Readout({ value, unit, size, label, className }: ReadoutProps): ReactNode;
+declare function Readout({ value, unit, size, label, onClick, title, className }: ReadoutProps): ReactNode;
 /** Props for {@link NumberInput}. */
 interface NumberInputProps {
     value: number;

package/dist/chrome/index.js

@@ -730,6 +730,22 @@ div.xc-section-trigger {
 }
 .xc-readout--md .xc-readout-value { font-size: ${PANEL_METRICS.fontBody + 1}px; }
 .xc-readout--sm .xc-readout-value { font-size: ${PANEL_METRICS.fontMeta}px; color: ${MUTED}; }
+.xc-readout--button {
+  appearance: none;
+  padding: 0 4px;
+  border: 1px solid transparent;
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+.xc-readout--button:hover {
+  border-color: ${BORDER};
+}
+.xc-readout--button:focus-visible {
+  outline: 1px solid ${PANEL_COLORS.focus};
+  outline-offset: -1px;
+}
 .xc-readout-unit {
   font-size: ${PANEL_METRICS.fontMeta - 2}px;
   letter-spacing: 0.06em;
@@ -1305,9 +1321,9 @@ function ScrollArea({ children, className }) {
   usePanelPrimitives();
   return /* @__PURE__ */ jsx("div", { className: cx(CLS_SCROLL, className), children });
 }
-function Column({ children, className }) {
+function Column({ children, className, ...rest }) {
   usePanelPrimitives();
-  return /* @__PURE__ */ jsx("div", { className: cx(CLS_COLUMN, className), children });
+  return /* @__PURE__ */ jsx("div", { className: cx(CLS_COLUMN, className), ...rest, children });
 }
 function Stack({ children, direction = "column", gap, pad = "gutter", className }) {
   usePanelPrimitives();
@@ -1324,7 +1340,7 @@ import { useState as useState3 } from "react";
 
 // src/chrome/controls.tsx
 import { useId } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function SearchGlyph() {
   return /* @__PURE__ */ jsxs2(
     "svg",
@@ -1626,12 +1642,16 @@ function Composer({
     }
   );
 }
-function Readout({ value, unit, size = "md", label, className }) {
+function Readout({ value, unit, size = "md", label, onClick, title, className }) {
   usePanelPrimitives();
-  return /* @__PURE__ */ jsxs2("span", { className: cx(CLS_READOUT, `${CLS_READOUT}--${size}`, className), "aria-label": label, role: label ? "status" : void 0, children: [
+  const body = /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2("span", { className: `${CLS_READOUT}-value`, children: value }),
     unit !== void 0 && unit !== null ? /* @__PURE__ */ jsx2("span", { className: `${CLS_READOUT}-unit`, children: unit }) : null
   ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsx2("button", { type: "button", className: cx(CLS_READOUT, `${CLS_READOUT}--${size}`, `${CLS_READOUT}--button`, className), onClick, title, "aria-label": label, children: body });
+  }
+  return /* @__PURE__ */ jsx2("span", { className: cx(CLS_READOUT, `${CLS_READOUT}--${size}`, className), "aria-label": label, role: label ? "status" : void 0, children: body });
 }
 function NumberInput({ value, onChange, caption, label, min, max, step, disabled, className }) {
   usePanelPrimitives();
@@ -1763,7 +1783,7 @@ function Section({
 
 // src/chrome/rows.tsx
 import { createContext, useContext } from "react";
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var RowListContext = createContext(null);
 function RowList({
   children,
@@ -1829,7 +1849,7 @@ function Row({
       ...rest,
       children: [
         noIcon ? null : /* @__PURE__ */ jsx4("span", { className: CLS_ROW_ICON, children: icon }),
-        children ?? /* @__PURE__ */ jsxs4(Fragment, { children: [
+        children ?? /* @__PURE__ */ jsxs4(Fragment2, { children: [
           /* @__PURE__ */ jsx4("span", { className: CLS_ROW_LABEL, children: label }),
           meta != null ? /* @__PURE__ */ jsx4("span", { className: CLS_ROW_META, children: meta }) : null
         ] }),
@@ -1873,7 +1893,7 @@ function ErrorState({
 }
 
 // src/chrome/indicators.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function Badge({
   children,
   tone = "neutral",
@@ -1939,7 +1959,7 @@ function ProportionBar({ segments, label, className }) {
 }
 function StatusBar({ left, right, children, className }) {
   usePanelPrimitives();
-  return /* @__PURE__ */ jsx6("div", { className: cx(CLS_STATUSBAR, className), children: children ?? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+  return /* @__PURE__ */ jsx6("div", { className: cx(CLS_STATUSBAR, className), children: children ?? /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsx6("span", { children: left }),
     /* @__PURE__ */ jsx6("span", { children: right })
   ] }) });
@@ -2059,6 +2079,7 @@ function gallery() {
   form("IconButton", "primary", () => /* @__PURE__ */ jsx7(IconButton, { icon: /* @__PURE__ */ jsx7(ChevronGlyph, {}), label: "Play", onClick: noop, variant: "primary" }));
   form("IconButton", "danger-armed", () => /* @__PURE__ */ jsx7(IconButton, { icon: /* @__PURE__ */ jsx7(ClearGlyph, {}), label: "Record", onClick: noop, variant: "danger", active: true }));
   form("Readout", "timecode", () => /* @__PURE__ */ jsx7(Readout, { value: "00:01:23:12", unit: "TC", label: "Position" }));
+  form("Readout", "clickable", () => /* @__PURE__ */ jsx7(Readout, { value: "00:01:23:12", unit: "TC", label: "Position 00:01:23:12", onClick: noop, title: "Click to change time display" }));
   form("Readout", "secondary", () => /* @__PURE__ */ jsx7(Readout, { value: "00:04:00:00", size: "sm" }));
   form("NumberInput", "default", () => /* @__PURE__ */ jsx7(NumberInput, { value: 120, onChange: noop, caption: "BPM", min: 20, max: 300 }));
   form("NumberInput", "disabled", () => /* @__PURE__ */ jsx7(NumberInput, { value: 24, onChange: noop, caption: "FPS", disabled: true }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/components",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "XENO Components \u2014 rung 2 of the front ladder: molecules composed from @xenosystem/elements, with no host contract. Families as subpaths: /auth, /navigation, /feedback, /data.",
   "license": "UNLICENSED",
   "type": "module",