@lattice-php/lattice 0.16.0 → 0.17.0

package/dist/types/generated.d.ts

@@ -1,7 +1,7 @@
 export type Action = {
     confirmation: Confirmation | null;
     endpoint: string | null;
-    form: Node | null;
+    form: WireNode | null;
     icon: string | null;
     label: string | null;
     lazyForm: boolean | null;
@@ -14,23 +14,7 @@ export type ActionGroup = {
     orientation: Orientation | null;
     ref: string | null;
 };
-export type ActionNode = {
-    type: "action";
-    key?: string;
-    id?: string;
-    props: Action;
-} | {
-    type: "action.group";
-    key?: string;
-    id?: string;
-    props: ActionGroup;
-    schema?: Node[];
-} | {
-    type: "bulkAction";
-    key?: string;
-    id?: string;
-    props: BulkAction;
-};
+export type ActionNodeType = "action" | "action.group" | "bulkAction";
 export type ActionResult = {
     readonly ok: boolean;
     readonly data: Record<string, unknown>;
@@ -91,7 +75,7 @@ export type Builder = {
 export type BulkAction = {
     confirmation: Confirmation | null;
     endpoint: string | null;
-    form: Node | null;
+    form: WireNode | null;
     icon: string | null;
     label: string | null;
     lazyForm: boolean | null;
@@ -100,11 +84,13 @@ export type BulkAction = {
     variant: ButtonVariant | null;
 };
 export type Button = {
+    action: WireNode | null;
     buttonType: ButtonType;
     effects: Effect[];
     href: string | null;
     icon: string | null;
     label: string;
+    method: HttpMethod | null;
     variant: ButtonVariant | null;
 };
 export type ButtonType = "button" | "submit" | "reset";
@@ -112,7 +98,7 @@ export type ButtonVariant = "default" | "destructive" | "ghost" | "info" | "link
 export type Callout = {
     title: string | null;
     dismissible: boolean;
-    action: Node | null;
+    action: WireNode | null;
     variant: Variant;
     message: string;
 };
@@ -161,20 +147,7 @@ export type ChatBox = {
 export type ChatMessage = {
     readonly id: string;
     readonly role: ChatRole;
-    readonly parts: Node[];
-};
-export type ChatNode = {
-    type: "chat.box";
-    key?: string;
-    props: ChatBox;
-} | {
-    type: "chat.part.text";
-    key?: string;
-    props: TextPart;
-} | {
-    type: "chat.part.tool-call";
-    key?: string;
-    props: ToolCallPart;
+    readonly parts: WireNode[];
 };
 export type ChatRole = "user" | "assistant" | "system";
 export type Checkbox = {
@@ -235,7 +208,7 @@ export type Collapsible = {
     collapsed: boolean;
     rememberState: boolean;
     tooltip: string | null;
-    trigger: Node[];
+    trigger: WireNode[];
 };
 export type Color = "default" | "muted" | "primary" | "success" | "info" | "warning" | "danger";
 export type ColumnAlign = "start" | "center" | "end";
@@ -283,6 +256,63 @@ export type ColumnPropsMap = {
 };
 export type ColumnType = "column.text" | "column.boolean" | "column.number" | "column.money" | "column.stack" | "column.badge" | "column.icon" | "column.image";
 export type ColumnWidth = "xs" | "sm" | "md" | "lg" | "xl";
+export type ComponentPropsMap = {
+    action: Action;
+    "action.group": ActionGroup;
+    badge: Badge;
+    breadcrumbs: Breadcrumbs;
+    bulkAction: BulkAction;
+    button: Button;
+    callouts: Callouts;
+    card: Card;
+    chart: Chart;
+    "chat.box": ChatBox;
+    "chat.part.text": TextPart;
+    "chat.part.tool-call": ToolCallPart;
+    collapsible: Collapsible;
+    dropdown: Dropdown;
+    "field.builder": Builder;
+    "field.checkbox": Checkbox;
+    "field.choice": Choice;
+    "field.date-input": DateInput;
+    "field.date-time-input": DateTimeInput;
+    "field.file-upload": FileUpload;
+    "field.hidden-input": HiddenInput;
+    "field.number-input": NumberInput;
+    "field.otp": OtpInput;
+    "field.password-input": PasswordInput;
+    "field.repeater": Repeater;
+    "field.rich-editor": RichEditor;
+    "field.select": Select;
+    "field.text-input": TextInput;
+    "field.textarea": Textarea;
+    "field.time-input": TimeInput;
+    "field.toggle": Toggle;
+    "floating-panel": FloatingPanel;
+    form: Form;
+    fragment: Fragment;
+    grid: Grid;
+    heading: Heading;
+    icon: Icon;
+    link: Link;
+    menu: Menu;
+    "menu-item": MenuItem;
+    modal: Modal;
+    notifications: Notifications;
+    outlet: Outlet;
+    "raw-block": RawBlock;
+    "remote.data-list": DataList;
+    section: Section;
+    "segmented-control": SegmentedControl;
+    sidebar: Sidebar;
+    stack: Stack;
+    tab: Tab;
+    table: Table;
+    tabs: Tabs;
+    text: Text;
+    tooltip: Tooltip;
+    topbar: Topbar;
+};
 export type Condition = {
     readonly field: string;
     readonly operator: Op;
@@ -294,93 +324,6 @@ export type Confirmation = {
     readonly confirmLabel: string | null;
     readonly cancelLabel: string | null;
 };
-export type CoreNode = {
-    type: "badge";
-    key?: string;
-    props: Badge;
-} | {
-    type: "button";
-    key?: string;
-    props: Button;
-} | {
-    type: "card";
-    key?: string;
-    props: Card;
-    schema?: Node[];
-} | {
-    type: "chart";
-    key?: string;
-    props: Chart;
-} | {
-    type: "collapsible";
-    key?: string;
-    props: Collapsible;
-    schema?: Node[];
-} | {
-    type: "floating-panel";
-    key?: string;
-    props: FloatingPanel;
-    schema?: Node[];
-} | {
-    type: "grid";
-    key?: string;
-    props: Grid;
-    schema?: Node[];
-} | {
-    type: "heading";
-    key?: string;
-    props: Heading;
-} | {
-    type: "icon";
-    key?: string;
-    props: Icon;
-} | {
-    type: "link";
-    key?: string;
-    props: Link;
-} | {
-    type: "modal";
-    key?: string;
-    id?: string;
-    props: Modal;
-    schema?: Node[];
-} | {
-    type: "raw-block";
-    key?: string;
-    props: RawBlock;
-} | {
-    type: "section";
-    key?: string;
-    props: Section;
-    schema?: Node[];
-} | {
-    type: "segmented-control";
-    key?: string;
-    props: SegmentedControl;
-} | {
-    type: "stack";
-    key?: string;
-    props: Stack;
-    schema?: Node[];
-} | {
-    type: "tab";
-    key?: string;
-    props: Tab;
-    schema?: Node[];
-} | {
-    type: "tabs";
-    key?: string;
-    props: Tabs;
-    schema?: Node[];
-} | {
-    type: "text";
-    key?: string;
-    props: Text;
-} | {
-    type: "tooltip";
-    key?: string;
-    props: Tooltip;
-};
 export type DataList = {
     dataEndpoint: string | null;
     emptyLabel: string | null;
@@ -456,31 +399,24 @@ export type DownloadEffect = {
 };
 export type Dropdown = {
     placement: Placement;
-    trigger: Node[];
-};
-export type Effect = ({
-    type: "callout";
-} & CalloutEffect) | ({
-    type: "closeModal";
-} & CloseModalEffect) | ({
-    type: "download";
-} & DownloadEffect) | ({
-    type: "localeChange";
-} & LocaleChangeEffect) | ({
-    type: "openModal";
-} & OpenModalEffect) | ({
-    type: "redirect";
-} & RedirectEffect) | ({
-    type: "reloadComponent";
-} & ReloadComponentEffect) | ({
-    type: "reloadPage";
-} & ReloadPageEffect) | ({
-    type: "resetForm";
-} & ResetFormEffect) | ({
-    type: "toast";
-} & ToastEffect) | ({
-    type: "toggleSidebar";
-} & ToggleSidebarEffect);
+    trigger: WireNode[];
+};
+export type Effect = {
+    type: string;
+} & Record<string, unknown>;
+export type EffectPropsMap = {
+    callout: CalloutEffect;
+    closeModal: CloseModalEffect;
+    download: DownloadEffect;
+    localeChange: LocaleChangeEffect;
+    openModal: OpenModalEffect;
+    redirect: RedirectEffect;
+    reloadComponent: ReloadComponentEffect;
+    reloadPage: ReloadPageEffect;
+    resetForm: ResetFormEffect;
+    toast: ToastEffect;
+    toggleSidebar: ToggleSidebarEffect;
+};
 export type FieldType = "field.builder" | "field.checkbox" | "field.choice" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.number-input" | "field.otp" | "field.password-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.textarea" | "field.text-input" | "field.time-input" | "field.toggle";
 export type FileUpload = {
     accept: string | null;
@@ -535,7 +471,7 @@ export type FloatingPanel = {
     label: string | null;
     offset: number;
     placement: FloatingPlacement;
-    trigger: Node[];
+    trigger: WireNode[];
 };
 export type FloatingPlacement = "bottom-end" | "bottom-start" | "top-end" | "top-start";
 export type Form = {
@@ -553,96 +489,14 @@ export type Form = {
     validationSummaryLabel: string;
     validationTimeout: number | null;
 };
-export type FormFieldNode = {
-    type: "field.builder";
-    key?: string;
-    props: Builder;
-} | {
-    type: "field.checkbox";
-    key?: string;
-    props: Checkbox;
-} | {
-    type: "field.choice";
-    key?: string;
-    props: Choice;
-} | {
-    type: "field.date-input";
-    key?: string;
-    props: DateInput;
-} | {
-    type: "field.date-time-input";
-    key?: string;
-    props: DateTimeInput;
-} | {
-    type: "field.file-upload";
-    key?: string;
-    props: FileUpload;
-} | {
-    type: "field.hidden-input";
-    key?: string;
-    props: HiddenInput;
-} | {
-    type: "field.number-input";
-    key?: string;
-    props: NumberInput;
-} | {
-    type: "field.otp";
-    key?: string;
-    props: OtpInput;
-} | {
-    type: "field.password-input";
-    key?: string;
-    props: PasswordInput;
-} | {
-    type: "field.repeater";
-    key?: string;
-    props: Repeater;
-} | {
-    type: "field.rich-editor";
-    key?: string;
-    props: RichEditor;
-} | {
-    type: "field.select";
-    key?: string;
-    props: Select;
-} | {
-    type: "field.text-input";
-    key?: string;
-    props: TextInput;
-} | {
-    type: "field.textarea";
-    key?: string;
-    props: Textarea;
-} | {
-    type: "field.time-input";
-    key?: string;
-    props: TimeInput;
-} | {
-    type: "field.toggle";
-    key?: string;
-    props: Toggle;
-};
-export type FormNode = FormFieldNode | {
-    type: "form";
-    key?: string;
-    id?: string;
-    props: Form;
-    schema?: Node[];
-};
-export type FormNodeType = FormNode["type"];
+export type FormFieldNodeType = "field.builder" | "field.checkbox" | "field.choice" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.number-input" | "field.otp" | "field.password-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle";
+export type FormNodeType = "field.builder" | "field.checkbox" | "field.choice" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.number-input" | "field.otp" | "field.password-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "form";
 export type Fragment = {
     endpoint: string | null;
     lazy: boolean | null;
     ref: string | null;
     size: Size;
 };
-export type FragmentNode = {
-    type: "fragment";
-    key?: string;
-    id?: string;
-    props: Fragment;
-    schema?: Node[];
-};
 export type Gap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 export type Grid = {
     columns: number | null;
@@ -700,46 +554,9 @@ export type ImageColumn = {
     size: number | null;
 };
 export type Justify = "start" | "center" | "end" | "between" | "around" | "evenly";
-export type LayoutNode = {
-    type: "breadcrumbs";
-    key?: string;
-    props: Breadcrumbs;
-} | {
-    type: "callouts";
-    key?: string;
-    props: Callouts;
-} | {
-    type: "dropdown";
-    key?: string;
-    props: Dropdown;
-    schema?: Node[];
-} | {
-    type: "menu";
-    key?: string;
-    props: Menu;
-    schema?: Node[];
-} | {
-    type: "menu-item";
-    key?: string;
-    props: MenuItem;
-    schema?: Node[];
-} | {
-    type: "outlet";
-    key?: string;
-    props: Outlet;
-} | {
-    type: "sidebar";
-    key?: string;
-    props: Sidebar;
-    schema?: Node[];
-} | {
-    type: "topbar";
-    key?: string;
-    props: Topbar;
-    schema?: Node[];
-};
 export type Link = {
-    action: Node | null;
+    action: WireNode | null;
+    effects: Effect[];
     href: string | null;
     icon: string | null;
     label: string;
@@ -759,7 +576,8 @@ export type LocaleChangeEffect = {
 };
 export type Menu = Record<string, never>;
 export type MenuItem = {
-    action: Node | null;
+    action: WireNode | null;
+    effects: Effect[];
     href: string | null;
     icon: string | null;
     label: string;
@@ -780,8 +598,24 @@ export type MoneyColumn = {
     maximumFractionDigits: number | null;
     minimumFractionDigits: number | null;
 };
-export type Node = FormNode | CoreNode | ActionNode | FragmentNode | RemoteNode | TableNode | LayoutNode | ChatNode;
-export type NodeType = Node["type"];
+export type NodeType = "action" | "action.group" | "badge" | "breadcrumbs" | "bulkAction" | "button" | "callouts" | "card" | "chart" | "chat.box" | "chat.part.text" | "chat.part.tool-call" | "collapsible" | "dropdown" | "field.builder" | "field.checkbox" | "field.choice" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.number-input" | "field.otp" | "field.password-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "floating-panel" | "form" | "fragment" | "grid" | "heading" | "icon" | "link" | "menu" | "menu-item" | "modal" | "notifications" | "outlet" | "raw-block" | "remote.data-list" | "section" | "segmented-control" | "sidebar" | "stack" | "tab" | "table" | "tabs" | "text" | "tooltip" | "topbar";
+export type NotificationItem = {
+    readonly id: string;
+    readonly title: string | null;
+    readonly body: string | null;
+    readonly icon: string | null;
+    readonly variant: Variant | null;
+    readonly href: string | null;
+    readonly isRead: boolean;
+    readonly createdAt: string | null;
+    readonly actions: WireNode[];
+};
+export type Notifications = {
+    channel: string;
+    endpoint: string;
+    pollingInterval: number | null;
+    slideOut: boolean;
+};
 export type NumberColumn = {
     compact: boolean;
     maximumFractionDigits: number | null;
@@ -927,12 +761,6 @@ export type RemoteAccess = {
     readonly tokenEndpoint: string;
     readonly ref: string;
 };
-export type RemoteNode = {
-    type: "remote.data-list";
-    key?: string;
-    props: DataList;
-    schema?: Node[];
-};
 export type Repeater = {
     addLabel: string | null;
     columnWidth: ColumnWidth;
@@ -1006,7 +834,7 @@ export type Section = {
     collapsed: boolean;
     collapsible: boolean;
     description: string | null;
-    headerActions: Node[];
+    headerActions: WireNode[];
     rememberState: boolean;
     title: string | null;
     tooltip: string | null;
@@ -1076,7 +904,7 @@ export type Tab = {
 };
 export type Table = {
     actionsLabel: string;
-    bulkActions: Node[];
+    bulkActions: WireNode[];
     columns: ColumnData[];
     emptyLabel: string;
     endpoint: string | null;
@@ -1088,12 +916,6 @@ export type Table = {
     resizeIndicator: boolean;
     striped: boolean | null;
 };
-export type TableNode = {
-    type: "table";
-    key?: string;
-    id?: string;
-    props: Table;
-};
 export type TablePagination = {
     readonly mode: PaginationType;
     readonly currentPage: number | null;
@@ -1241,7 +1063,7 @@ export type ToastMessage = {
     duration: number | null;
     persistent: boolean;
     dismissible: boolean;
-    action: Node | null;
+    action: WireNode | null;
     variant: Variant;
     message: Translatable | string;
 };
@@ -1279,7 +1101,7 @@ export type ToolCallPart = {
 };
 export type Tooltip = {
     content: string | null;
-    trigger: Node[];
+    trigger: WireNode[];
 };
 export type Topbar = {
     sticky: boolean;
@@ -1291,3 +1113,10 @@ export type Translatable = {
 };
 export type Variant = "success" | "info" | "warning" | "error";
 export type Width = "full" | "auto" | "sm" | "md" | "lg" | "fill";
+export type WireNode = {
+    id?: string;
+    key?: string;
+    type: string;
+    props?: Record<string, unknown>;
+    schema?: WireNode[];
+};

package/dist/vite-client.d.ts

@@ -0,0 +1,8 @@
+declare module "virtual:lattice/plugins" {
+  import type { Plugin } from "@lattice-php/lattice";
+
+  /** Plugins for the Composer-installed Lattice component packages the `lattice()` Vite plugin discovered. */
+  const plugins: Plugin[];
+
+  export default plugins;
+}

package/dist/vite.d.ts

@@ -1,5 +1,5 @@
 import { SvgSpriteOptions } from '@lattice-php/vite-svg-sprite';
-import { PluginOption, UserConfig } from 'vite';
+import { Plugin, PluginOption, UserConfig } from 'vite';
 type InlineDependency = string | RegExp;
 type ConfigWithTest = UserConfig & {
     test?: {
@@ -21,5 +21,39 @@ export type LatticeViteOptions = {
     source?: boolean;
 };
 export declare function lattice(options?: LatticeViteOptions): PluginOption[];
+/** A Composer package that contributes a Lattice component plugin. */
+export type LatticeComponentPackage = {
+    name: string;
+    /** Absolute path to the package's installed directory. */
+    dir: string;
+    /** Absolute path to the package's JS plugin entry (its `createPlugin(...)`). */
+    plugin: string;
+};
+type InstalledPackage = {
+    name: string;
+    "install-path"?: string;
+    extra?: {
+        lattice?: {
+            plugin?: string;
+        };
+    };
+};
+/**
+ * Resolve every Composer package that declares `extra.lattice.plugin` into an
+ * absolute plugin-entry path. `installPathsRelativeTo` is `vendor/composer` (the
+ * dir `installed.json` records its `install-path`s against).
+ */
+export declare function collectComponentPackages(installed: {
+    packages?: InstalledPackage[];
+} | InstalledPackage[], installPathsRelativeTo: string): LatticeComponentPackage[];
+/** Read `<appRoot>/vendor/composer/installed.json` and collect component packages. */
+export declare function discoverComponentPackages(appRoot: string): LatticeComponentPackage[];
+/**
+ * Exposes the discovered component packages as `virtual:lattice/plugins` — a
+ * module whose default export is the array of their `createPlugin(...)` results,
+ * ready for `extendRegistry(registry, ...plugins)`. Also grants Vite filesystem
+ * access to each package dir so its source compiles from `vendor/` (or a symlink).
+ */
+export declare function componentPackagesPlugin(packages: LatticeComponentPackage[]): Plugin;
 export declare function latticeConfig(options?: LatticeViteOptions): ConfigWithTest;
 export {};

package/dist/vite.js

@@ -1,13 +1,71 @@
+import { readFileSync } from "node:fs";
 import path from "node:path";
 import { svgSprite } from "@lattice-php/vite-svg-sprite";
 import { searchForWorkspaceRoot } from "vite";
 //#region resources/js/vite.ts
 function lattice(options = {}) {
-	const plugins = [corePlugin(options), optionalPeersPlugin()];
+	const { appRoot } = resolveRoots(options);
+	const plugins = [
+		corePlugin(options),
+		optionalPeersPlugin(),
+		componentPackagesPlugin(discoverComponentPackages(appRoot))
+	];
 	const iconOptions = resolveIconOptions(options);
 	if (iconOptions) plugins.push(svgSprite(iconOptions));
 	return plugins;
 }
+/**
+* Resolve every Composer package that declares `extra.lattice.plugin` into an
+* absolute plugin-entry path. `installPathsRelativeTo` is `vendor/composer` (the
+* dir `installed.json` records its `install-path`s against).
+*/
+function collectComponentPackages(installed, installPathsRelativeTo) {
+	return (Array.isArray(installed) ? installed : installed.packages ?? []).flatMap((pkg) => {
+		const entry = pkg.extra?.lattice?.plugin;
+		if (typeof entry !== "string") return [];
+		const dir = path.resolve(installPathsRelativeTo, pkg["install-path"] ?? `../${pkg.name}`);
+		return [{
+			name: pkg.name,
+			dir,
+			plugin: path.resolve(dir, entry)
+		}];
+	});
+}
+/** Read `<appRoot>/vendor/composer/installed.json` and collect component packages. */
+function discoverComponentPackages(appRoot) {
+	const composerDir = path.resolve(appRoot, "vendor/composer");
+	let raw;
+	try {
+		raw = readFileSync(path.join(composerDir, "installed.json"), "utf8");
+	} catch {
+		return [];
+	}
+	return collectComponentPackages(JSON.parse(raw), composerDir);
+}
+var VIRTUAL_PLUGINS_ID = "virtual:lattice/plugins";
+var RESOLVED_VIRTUAL_PLUGINS_ID = `\0${VIRTUAL_PLUGINS_ID}`;
+/**
+* Exposes the discovered component packages as `virtual:lattice/plugins` — a
+* module whose default export is the array of their `createPlugin(...)` results,
+* ready for `extendRegistry(registry, ...plugins)`. Also grants Vite filesystem
+* access to each package dir so its source compiles from `vendor/` (or a symlink).
+*/
+function componentPackagesPlugin(packages) {
+	return {
+		name: "lattice:component-packages",
+		config() {
+			if (packages.length === 0) return {};
+			return { server: { fs: { allow: packages.map((pkg) => pkg.dir) } } };
+		},
+		resolveId(id) {
+			return id === VIRTUAL_PLUGINS_ID ? RESOLVED_VIRTUAL_PLUGINS_ID : null;
+		},
+		load(id) {
+			if (id !== RESOLVED_VIRTUAL_PLUGINS_ID) return null;
+			return `${packages.map((pkg, index) => `import p${index} from ${JSON.stringify(pkg.plugin)};`).join("\n")}\nexport default [${packages.map((_, index) => `p${index}`).join(", ")}];\n`;
+		}
+	};
+}
 function latticeConfig(options = {}) {
 	const { appRoot, root } = resolveRoots(options);
 	return {
@@ -98,6 +156,6 @@ function resolveRoots(options) {
 	};
 }
 //#endregion
-export { lattice, latticeConfig };
+export { collectComponentPackages, componentPackagesPlugin, discoverComponentPackages, lattice, latticeConfig };
 
 //# sourceMappingURL=vite.js.map