@duskmoon-dev/components 0.3.3 → 0.4.1

package/README.md

@@ -41,8 +41,8 @@ import { Button, DmTable, theme } from "@duskmoon-dev/components";
 
 ## Public Surface
 
-- 73 standard components such as `Button`, `Chat`, `Table`, `Modal`, `Select`,
-  and `Typography`.
+- 79 standard components such as `Button`, `Chat`, `OtpInput`, `Swap`, `Fab`,
+  `Megamenu`, `ConsolePage`, `Table`, `Modal`, `Select`, and `Typography`.
 - 21 DuskMoon workflow components such as `DmLayout`, `DmSearch`, `DmTable`,
   `DmProTable`, and `DmToolbar`.
 - 13 infrastructure exports including `theme`, `version`,
@@ -50,6 +50,69 @@ import { Button, DmTable, theme } from "@duskmoon-dev/components";
 - Component subpath exports follow `@duskmoon-dev/components/{component-id}`,
   for example `@duskmoon-dev/components/date-picker`.
 
+`OtpInput` uses one native input with decorative slots. `Swap` uses a native
+checkbox. `Fab`, `Megamenu`, and the mobile menu in `ConsolePage` use the
+browser's Popover API for opening, Escape dismissal, and focus restoration.
+These components require `@duskmoon-dev/core` 1.20.0 or newer.
+
+`Form.Item` associates its label with a single child control, preserving an
+existing child `id`. For composite controls, pass `htmlFor` with the target
+control's `id`. `Badge appearance="outline"` emits both `badge-outlined` and
+the supported `badge-outline` alias.
+
+`Chat.Scroll` provides a fixed-height transcript with a sticky reply rail.
+Pair assistant rows and indicator buttons with timeline slots 1–24; user rows
+do not need ticks. `Chat.Status` and `Chat.Actions` accept ordinary content and
+button callbacks, so the application owns generation state and metrics. The
+Chat docs show all ten Core 1.20.3 showcases, including RTL bubbles, live states,
+tool statuses, and message actions. For an LLM reply, place reasoning and tool
+details inside one `Chat.Bubble`, with final content in
+`.chat-bubble-content`. The new Chat styles and the `Avatar` `2xl` size require
+Core 1.20.3 or newer.
+
+```tsx
+import { Chat } from "@duskmoon-dev/components/chat";
+import { useId } from "react";
+
+export function Conversation() {
+  const replyId = useId();
+  async function copyReply() {
+    await navigator.clipboard.writeText("The build passed.");
+  }
+
+  return (
+    <Chat.Scroll style={{ height: 320 }} aria-label="Conversation">
+      <Chat.ScrollTrack aria-label="Assistant replies">
+        <Chat.ScrollIndicator timeline={1} targetId={replyId} />
+      </Chat.ScrollTrack>
+      <Chat.ScrollBody>
+        <Chat id={replyId} timeline={1}>
+          <Chat.Bubble>The build passed.</Chat.Bubble>
+          <Chat.Status>
+            <Chat.StatusItem>Completed</Chat.StatusItem>
+            <Chat.StatusItem>
+              <Chat.StatusValue>42</Chat.StatusValue> token/s
+            </Chat.StatusItem>
+          </Chat.Status>
+          <Chat.Actions hover>
+            <button type="button" onClick={copyReply}>
+              Copy reply
+            </button>
+          </Chat.Actions>
+        </Chat>
+      </Chat.ScrollBody>
+    </Chat.Scroll>
+  );
+}
+```
+
+`Modal` requires a modern browser with native `<dialog>` support. It opens and
+closes through `showModal()` and `close()`, while its forwarded ref and div props
+remain on the inner modal box. Controlled callers must update `open` in
+`onCancel`; `maskClassName` is applied to the dialog for `::backdrop` styling.
+The static `Modal.confirm`, `info`, `success`, `error`, and `warning` handles
+remain exported but do not render a service surface yet.
+
 ## Development
 
 ```bash
@@ -65,3 +128,80 @@ bun run typecheck
 # Check parity manifest coverage
 bun run parity:components
 ```
+
+## JSON Schema forms
+
+`@duskmoon-dev/components/json-schema-form` exports `JsonSchemaForm`,
+`compileForm`, `JsonSchemaWidget`, and the `RenderableSchema`, `CompiledForm`,
+`FormValue`, `JsonValue`, `FormErrors`, `FormValidationResult`,
+`JsonSchemaFormProps`, `JsonSchemaWidgetProps`, and widget contract types.
+Ajv and ajv-formats are installed as package runtime dependencies. The package
+stylesheet includes the renderer layout. Import these APIs from the explicit
+subpath; schema compilation is kept separate from the root component bundle.
+
+```tsx
+import { useState } from "react";
+import "@duskmoon-dev/components/styles.css";
+import {
+  JsonSchemaForm,
+  type FormErrors,
+  type FormValue,
+  type RenderableSchema,
+} from "@duskmoon-dev/components/json-schema-form";
+
+const schema: RenderableSchema = {
+  type: "object",
+  required: ["name"],
+  properties: {
+    name: { type: "string", title: "Name", minLength: 1 },
+    age: { type: "integer", title: "Age", minimum: 0 },
+  },
+};
+
+export function ProfileIsland({ send }: { send: (value: FormValue) => void }) {
+  const [value, setValue] = useState<FormValue>({ name: "Ada" });
+  const [errors, setErrors] = useState<FormErrors>({});
+  return (
+    <JsonSchemaForm
+      schema={schema}
+      value={value}
+      onChange={setValue}
+      errors={errors}
+      onErrorsChange={setErrors}
+      onSubmit={send}
+    />
+  );
+}
+```
+
+Mount the React root inside a LiveView element with a stable `id` and
+`phx-update="ignore"`. Parse the backend's schema JSON and call `compileForm`
+when accepting untrusted input; catch compilation errors before rendering.
+Pass the returned object as `compiled` instead of `schema` to compile once.
+Send the validated object from `onSubmit` through the island's LiveView hook;
+backend validation is still required. Use a new React `key` when replacing a
+schema and starting a fresh form.
+
+`value` and `onChange` control values. Omit `value` for internal state, optionally
+seeded by `defaultValue`. Reset restores `defaultValue` or schema defaults,
+notifies `onChange`, clears validation errors, and calls `onReset`. Backend
+`errors` merge with local errors and use escaped JSON Pointer keys such as
+`/address/email` (the empty key denotes a form error). Clear backend errors in
+`onErrorsChange`, which receives an empty object on edits/reset and validation
+errors on submission. `onSubmit` runs only for valid values and receives a
+copied JSON object with numbers and booleans preserved.
+
+The supported schema is a strict JSON Schema draft 2020-12 subset: object roots,
+nested objects, homogeneous arrays, primitive fields/enums/defaults, required
+fields, `additionalProperties: false`, string constraints/formats, numeric
+constraints, and array/object size constraints. References, combinators,
+nullable types, and arbitrary keywords are rejected. Validation does not coerce,
+remove, or default submitted values.
+
+Use `x-widget` for explicit component selection, `x-options` for typed option
+labels/hierarchies, and `x-widget-options` for orientation, length, count,
+allowHalf, min, max, and step where supported. `widgetNames`, `WidgetName`,
+`WidgetOption`, `WidgetConfig`, and `OrientationWidgetConfig` expose this
+contract; `compileForm` checks widget/type/config compatibility. Upload widgets
+submit JSON file metadata (`name`, `size`, `type`, `lastModified`), with file
+transfer owned by the application.

package/dist/classes/chat.d.ts

@@ -4,6 +4,15 @@ export declare const chatAvatarClass = "chat-avatar";
 export declare const chatHeaderClass = "chat-header";
 export declare const chatBubbleBaseClass = "chat-bubble";
 export declare const chatFooterClass = "chat-footer";
+export declare const chatStatusClass = "chat-status";
+export declare const chatStatusItemClass = "chat-status-item";
+export declare const chatStatusValueClass = "chat-status-value";
+export declare const chatActionsClass = "chat-actions";
+export declare const chatActionsHoverClass = "chat-actions-hover";
+export declare const chatScrollClass = "chat-scroll";
+export declare const chatScrollBodyClass = "chat-scroll-body";
+export declare const chatScrollTrackClass = "chat-scroll-track";
+export declare const chatScrollIndicatorClass = "chat-scroll-indicator";
 export declare const chatReasoningClass = "chat-reasoning";
 export declare const chatToolBaseClass = "chat-tool";
 export declare const chatToolHeaderClass = "chat-tool-header";
@@ -11,7 +20,6 @@ export declare const chatToolStatusClass = "chat-tool-status";
 export declare const chatToolCallClass = "chat-tool-call";
 export declare const chatToolResultClass = "chat-tool-result";
 export declare const chatTypingClass = "chat-typing";
-export declare const chatStreamingCaretClass = "chat-streaming-caret";
 export declare const chatBubbleFilledClass = "chat-bubble-filled";
 export declare const chatBubbleStreamingClass = "chat-bubble-streaming";
 export declare const chatPlacementClasses: Record<ChatPlacement, string>;

package/dist/classes/console-page.d.ts

@@ -0,0 +1,16 @@
+export type ConsolePageSidebarState = "expanded" | "compact" | "hidden";
+export declare const consolePageFrameClass = "console-page-frame";
+export declare const consolePageAppbarClass = "console-page-appbar";
+export declare const consolePageSidebarClass = "console-page-sidebar";
+export declare const consolePageSidebarHeaderClass = "console-page-sidebar-header";
+export declare const consolePageSidebarBodyClass = "console-page-sidebar-body";
+export declare const consolePageSidebarFooterClass = "console-page-sidebar-footer";
+export declare const consolePageMainClass = "console-page-main";
+export declare const consolePageNavLabelClass = "console-page-nav-label";
+export declare const consolePageSidebarToggleClass = "console-page-sidebar-toggle";
+export declare const consolePageMenuTriggerClass = "console-page-menu-trigger";
+export declare const consolePageMobileMenuClass = "console-page-mobile-menu";
+export declare function getConsolePageClasses({ sidebarState, className, }: {
+    sidebarState?: ConsolePageSidebarState;
+    className?: string;
+}): string;

package/dist/classes/dropdown.d.ts

@@ -1,12 +1,12 @@
 import type { DropdownPlacement } from "../components/dropdown/Dropdown.types";
-export declare const dropdownWrapperClass = "dropdown-wrapper";
-export declare const dropdownBaseClass = "popover dropdown";
-export declare const dropdownOpenClass = "popover-show dropdown-open";
-export declare const dropdownArrowClass = "popover-arrow dropdown-arrow";
+export declare const dropdownWrapperClass = "dropdown";
+export declare const dropdownBaseClass = "dropdown-content";
+export declare const dropdownOpenClass = "";
+export declare const dropdownArrowClass = "dropdown-arrow";
 export declare const dropdownMenuClass = "menu dropdown-menu";
 export declare const dropdownButtonClass = "dropdown-button";
 export declare const dropdownPlacementClasses: Record<DropdownPlacement, string>;
-export declare function getDropdownClasses({ placement, open, arrow, className, }: {
+export declare function getDropdownClasses({ className, }: {
     placement?: DropdownPlacement;
     open?: boolean;
     arrow?: boolean;

package/dist/classes/fab.d.ts

@@ -0,0 +1,11 @@
+export declare const fabClass = "fab";
+export declare const fabTriggerClass = "fab-trigger";
+export declare const fabActionsClass = "fab-actions";
+export declare const fabActionClass = "fab-action";
+export declare const fabLabelClass = "fab-label";
+export declare function getFabClasses({ contained, start, speedDial, className, }: {
+    contained?: boolean;
+    start?: boolean;
+    speedDial?: boolean;
+    className?: string;
+}): string;

package/dist/classes/index.d.ts

@@ -11,6 +11,7 @@ export * from "./button";
 export * from "./calendar";
 export * from "./card";
 export * from "./chat";
+export * from "./console-page";
 export * from "./carousel";
 export * from "./cascader";
 export * from "./checkbox";
@@ -47,6 +48,7 @@ export * from "./dropdown";
 export * from "./empty";
 export * from "./flex";
 export * from "./float-button";
+export * from "./fab";
 export * from "./form";
 export * from "./grid";
 export * from "./image";
@@ -56,9 +58,11 @@ export * from "./layout";
 export * from "./list";
 export * from "./mentions";
 export * from "./menu";
+export * from "./megamenu";
 export * from "./message";
 export * from "./modal";
 export * from "./notification";
+export * from "./otp-input";
 export * from "./pagination";
 export * from "./popover";
 export * from "./popconfirm";
@@ -78,6 +82,7 @@ export * from "./splitter";
 export * from "./statistic";
 export * from "./steps";
 export * from "./switch";
+export * from "./swap";
 export * from "./tabs";
 export * from "./tag";
 export * from "./table";