@melony/ui-kit 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-H3YMHUQF.js → chunk-HD3GFIOQ.js} +44 -3
- package/dist/chunk-HD3GFIOQ.js.map +1 -0
- package/dist/client.d.ts +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/server.d.ts +19 -2
- package/dist/server.js +1 -1
- package/dist/{types-DtZUMRhi.d.ts → types-CeG_yjaS.d.ts} +20 -10
- package/package.json +3 -3
- package/dist/chunk-H3YMHUQF.js.map +0 -1
|
@@ -35,9 +35,50 @@ var ui = {
|
|
|
35
35
|
list: (props = {}, children = []) => ui.node("list", props, children),
|
|
36
36
|
listItem: (props = {}, children = []) => ui.node("listItem", props, children),
|
|
37
37
|
// organisms
|
|
38
|
-
thread: (props = {}, children = []) => ui.node("thread", props, children)
|
|
38
|
+
thread: (props = {}, children = []) => ui.node("thread", props, children),
|
|
39
|
+
themeToggle: (props = {}) => ui.node("themeToggle", props),
|
|
40
|
+
// --- Semantic Helpers (Intent-based) ---
|
|
41
|
+
/**
|
|
42
|
+
* Status text for tool results or process updates.
|
|
43
|
+
*/
|
|
44
|
+
status: (message, severity = "info") => ui.node("text", {
|
|
45
|
+
value: message,
|
|
46
|
+
color: severity === "error" ? "danger" : severity === "success" ? "success" : "muted",
|
|
47
|
+
size: "xs",
|
|
48
|
+
weight: "medium"
|
|
49
|
+
}),
|
|
50
|
+
/**
|
|
51
|
+
* A standardized card for resources (files, websites, terminal sessions).
|
|
52
|
+
*/
|
|
53
|
+
resourceCard: (title, subtitle, children = []) => ui.card({
|
|
54
|
+
title,
|
|
55
|
+
subtitle,
|
|
56
|
+
padding: "none",
|
|
57
|
+
radius: "lg",
|
|
58
|
+
shadow: "none",
|
|
59
|
+
background: "background"
|
|
60
|
+
}, children.length > 0 ? [
|
|
61
|
+
ui.box({ padding: "md" }, children)
|
|
62
|
+
] : []),
|
|
63
|
+
/**
|
|
64
|
+
* A horizontal group for action buttons, typically at the bottom of a card.
|
|
65
|
+
*/
|
|
66
|
+
actionGroup: (children) => ui.row({
|
|
67
|
+
gap: "xs",
|
|
68
|
+
padding: "xs",
|
|
69
|
+
justify: "end"
|
|
70
|
+
}, children),
|
|
71
|
+
/**
|
|
72
|
+
* A block for displaying structured data (key/value pairs).
|
|
73
|
+
*/
|
|
74
|
+
dataBlock: (data) => ui.col({ gap: "xs" }, Object.entries(data).filter(([_, v]) => v !== void 0 && v !== null).map(
|
|
75
|
+
([key, value]) => ui.row({ gap: "sm", align: "start" }, [
|
|
76
|
+
ui.text(`${key}:`, { weight: "semibold", size: "xs", color: "muted" }),
|
|
77
|
+
ui.text(String(value), { size: "xs" })
|
|
78
|
+
])
|
|
79
|
+
))
|
|
39
80
|
};
|
|
40
81
|
|
|
41
82
|
export { ui };
|
|
42
|
-
//# sourceMappingURL=chunk-
|
|
43
|
-
//# sourceMappingURL=chunk-
|
|
83
|
+
//# sourceMappingURL=chunk-HD3GFIOQ.js.map
|
|
84
|
+
//# sourceMappingURL=chunk-HD3GFIOQ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/server.ts"],"names":[],"mappings":"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","file":"chunk-HD3GFIOQ.js","sourcesContent":["import { UIContract, UINode, UIEvent } from \"./types\";\n\nexport * from \"./types\";\n\n/**\n * Helper to create UI events in Melony actions.\n */\nexport const ui = {\n /**\n * Creates a UI node.\n */\n node: <T extends keyof UIContract>(\n type: T,\n props: UIContract[T] = {} as any,\n children: UINode<any>[] = []\n ): UINode<T> => ({\n type,\n props,\n children,\n }),\n\n /**\n * Wraps a UI node in an event.\n */\n event: (node: UINode): UIEvent => ({\n type: \"ui\",\n data: node,\n }),\n\n card: (props: UIContract[\"card\"] = {}, children: UINode[] = []) =>\n ui.node(\"card\", props, children),\n\n button: (props: UIContract[\"button\"], children: UINode[] = []) =>\n ui.node(\"button\", props, children),\n\n text: (value: string, props: Partial<UIContract[\"text\"]> = {}) =>\n ui.node(\"text\", { value, ...props }),\n\n heading: (value: string, level: UIContract[\"heading\"][\"level\"] = 1, props: Partial<UIContract[\"heading\"]> = {}) =>\n ui.node(\"heading\", { value, level, ...props }),\n\n row: (props: UIContract[\"row\"] = {}, children: UINode[] = []) =>\n ui.node(\"row\", props, children),\n\n col: (props: UIContract[\"col\"] = {}, children: UINode[] = []) =>\n ui.node(\"col\", props, children),\n\n box: (props: UIContract[\"box\"] = {}, children: UINode[] = []) =>\n ui.node(\"box\", props, children),\n\n badge: (label: string, variant: UIContract[\"badge\"][\"variant\"] = \"primary\", props: Partial<UIContract[\"badge\"]> = {}) =>\n ui.node(\"badge\", { label, variant, ...props }),\n\n input: (name: string, label?: string, props: Partial<UIContract[\"input\"]> = {}) =>\n ui.node(\"input\", { name, label, ...props }),\n\n textarea: (name: string, label?: string, props: Partial<UIContract[\"textarea\"]> = {}) =>\n ui.node(\"textarea\", { name, label, ...props }),\n\n select: (name: string, options: UIContract[\"select\"][\"options\"], label?: string, props: Partial<UIContract[\"select\"]> = {}) =>\n ui.node(\"select\", { name, options, label, ...props }),\n\n checkbox: (name: string, label?: string, props: Partial<UIContract[\"checkbox\"]> = {}) =>\n ui.node(\"checkbox\", { name, label, ...props }),\n\n form: (props: UIContract[\"form\"] = {}, children: UINode[] = []) =>\n ui.node(\"form\", props, children),\n\n icon: (name: string, props: Partial<UIContract[\"icon\"]> = {}) =>\n ui.node(\"icon\", { name, ...props }),\n\n image: (src: string, alt?: string, props: Partial<UIContract[\"image\"]> = {}) =>\n ui.node(\"image\", { src, alt, ...props }),\n\n spacer: (props: UIContract[\"spacer\"] = {}) =>\n ui.node(\"spacer\", props),\n\n divider: (props: UIContract[\"divider\"] = {}) =>\n ui.node(\"divider\", props),\n\n list: (props: UIContract[\"list\"] = {}, children: UINode[] = []) =>\n ui.node(\"list\", props, children),\n\n listItem: (props: UIContract[\"listItem\"] = {}, children: UINode[] = []) =>\n ui.node(\"listItem\", props, children),\n\n // organisms\n thread: (props: UIContract[\"thread\"] = {}, children: UINode[] = []) =>\n ui.node(\"thread\", props, children),\n\n themeToggle: (props: UIContract[\"themeToggle\"] = {}) =>\n ui.node(\"themeToggle\", props),\n\n // --- Semantic Helpers (Intent-based) ---\n\n /**\n * Status text for tool results or process updates.\n */\n status: (message: string, severity: 'info' | 'success' | 'error' = 'info') =>\n ui.node('text', {\n value: message,\n color: severity === 'error' ? 'danger' : severity === 'success' ? 'success' : 'muted',\n size: 'xs',\n weight: 'medium'\n }),\n\n /**\n * A standardized card for resources (files, websites, terminal sessions).\n */\n resourceCard: (title: string, subtitle?: string, children: UINode[] = []) =>\n ui.card({\n title,\n subtitle,\n padding: 'none',\n radius: 'lg',\n shadow: 'none',\n background: 'background',\n }, children.length > 0 ? [\n ui.box({ padding: 'md' }, children)\n ] : []),\n\n /**\n * A horizontal group for action buttons, typically at the bottom of a card.\n */\n actionGroup: (children: UINode[]) =>\n ui.row({\n gap: 'xs',\n padding: 'xs',\n justify: 'end',\n }, children),\n\n /**\n * A block for displaying structured data (key/value pairs).\n */\n dataBlock: (data: Record<string, any>) =>\n ui.col({ gap: 'xs' }, Object.entries(data).filter(([_, v]) => v !== undefined && v !== null).map(([key, value]) =>\n ui.row({ gap: 'sm', align: 'start' }, [\n ui.text(`${key}:`, { weight: 'semibold', size: 'xs', color: 'muted' }),\n ui.text(String(value), { size: 'xs' }),\n ])\n )),\n};\n"]}
|
package/dist/client.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { j as UIContract, k as UINode } from './types-
|
|
2
|
-
export { a as UIAlign, e as UIColor, l as UIEvent, b as UIJustify, d as UIOrientation, i as UIRadius, h as UIShadow, U as UISize, f as UISpacing, g as UIWidth, c as UIWrap } from './types-
|
|
1
|
+
import { j as UIContract, k as UINode } from './types-CeG_yjaS.js';
|
|
2
|
+
export { a as UIAlign, e as UIColor, l as UIEvent, b as UIJustify, d as UIOrientation, i as UIRadius, h as UIShadow, U as UISize, f as UISpacing, g as UIWidth, c as UIWrap } from './types-CeG_yjaS.js';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import React, { ReactNode } from 'react';
|
|
5
5
|
import 'melony';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { ui } from './server.js';
|
|
2
|
-
export { a as UIAlign, e as UIColor, j as UIContract, l as UIEvent, b as UIJustify, k as UINode, d as UIOrientation, i as UIRadius, h as UIShadow, U as UISize, f as UISpacing, g as UIWidth, c as UIWrap } from './types-
|
|
2
|
+
export { a as UIAlign, e as UIColor, j as UIContract, l as UIEvent, b as UIJustify, k as UINode, d as UIOrientation, i as UIRadius, h as UIShadow, U as UISize, f as UISpacing, g as UIWidth, c as UIWrap } from './types-CeG_yjaS.js';
|
|
3
3
|
export { MelonyComponents, MelonyRenderer, MelonyRendererProps, MelonyUIContextValue, MelonyUIProvider, MelonyUIProviderProps, useMelonyUI } from './client.js';
|
|
4
4
|
import 'melony';
|
|
5
5
|
import 'react/jsx-runtime';
|
package/dist/index.js
CHANGED
package/dist/server.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { j as UIContract, k as UINode, l as UIEvent } from './types-
|
|
2
|
-
export { a as UIAlign, e as UIColor, b as UIJustify, d as UIOrientation, i as UIRadius, h as UIShadow, U as UISize, f as UISpacing, g as UIWidth, c as UIWrap } from './types-
|
|
1
|
+
import { j as UIContract, k as UINode, l as UIEvent } from './types-CeG_yjaS.js';
|
|
2
|
+
export { a as UIAlign, e as UIColor, b as UIJustify, d as UIOrientation, i as UIRadius, h as UIShadow, U as UISize, f as UISpacing, g as UIWidth, c as UIWrap } from './types-CeG_yjaS.js';
|
|
3
3
|
import 'melony';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -34,6 +34,23 @@ declare const ui: {
|
|
|
34
34
|
list: (props?: UIContract["list"], children?: UINode[]) => UINode<"list">;
|
|
35
35
|
listItem: (props?: UIContract["listItem"], children?: UINode[]) => UINode<"listItem">;
|
|
36
36
|
thread: (props?: UIContract["thread"], children?: UINode[]) => UINode<"thread">;
|
|
37
|
+
themeToggle: (props?: UIContract["themeToggle"]) => UINode<"themeToggle">;
|
|
38
|
+
/**
|
|
39
|
+
* Status text for tool results or process updates.
|
|
40
|
+
*/
|
|
41
|
+
status: (message: string, severity?: "info" | "success" | "error") => UINode<"text">;
|
|
42
|
+
/**
|
|
43
|
+
* A standardized card for resources (files, websites, terminal sessions).
|
|
44
|
+
*/
|
|
45
|
+
resourceCard: (title: string, subtitle?: string, children?: UINode[]) => UINode<"card">;
|
|
46
|
+
/**
|
|
47
|
+
* A horizontal group for action buttons, typically at the bottom of a card.
|
|
48
|
+
*/
|
|
49
|
+
actionGroup: (children: UINode[]) => UINode<"row">;
|
|
50
|
+
/**
|
|
51
|
+
* A block for displaying structured data (key/value pairs).
|
|
52
|
+
*/
|
|
53
|
+
dataBlock: (data: Record<string, any>) => UINode<"col">;
|
|
37
54
|
};
|
|
38
55
|
|
|
39
56
|
export { UIContract, UIEvent, UINode, ui };
|
package/dist/server.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { Event } from 'melony';
|
|
2
2
|
|
|
3
|
-
type UISize = "sm" | "md" | "lg";
|
|
4
|
-
type UIAlign = "start" | "center" | "end" | "stretch";
|
|
5
|
-
type UIJustify = "start" | "center" | "end" | "between" | "around";
|
|
6
|
-
type UIWrap = "nowrap" | "wrap" | "wrap-reverse";
|
|
7
|
-
type UIOrientation = "horizontal" | "vertical";
|
|
8
|
-
type UIColor = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "background" | "foreground" | "muted" | "mutedForeground" | "border" | "transparent";
|
|
9
|
-
type UISpacing = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
|
|
10
|
-
type UIWidth = "auto" | "full" | "min" | "max" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | number;
|
|
11
|
-
type UIShadow = "none" | "sm" | "md" | "lg" | "xl";
|
|
12
|
-
type UIRadius = "none" | "sm" | "md" | "lg" | "full";
|
|
3
|
+
type UISize = "sm" | "md" | "lg" | (string & {});
|
|
4
|
+
type UIAlign = "start" | "center" | "end" | "stretch" | (string & {});
|
|
5
|
+
type UIJustify = "start" | "center" | "end" | "between" | "around" | (string & {});
|
|
6
|
+
type UIWrap = "nowrap" | "wrap" | "wrap-reverse" | (string & {});
|
|
7
|
+
type UIOrientation = "horizontal" | "vertical" | (string & {});
|
|
8
|
+
type UIColor = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "background" | "foreground" | "muted" | "mutedForeground" | "border" | "transparent" | (string & {});
|
|
9
|
+
type UISpacing = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | (string & {});
|
|
10
|
+
type UIWidth = "auto" | "full" | "min" | "max" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | number | (string & {});
|
|
11
|
+
type UIShadow = "none" | "sm" | "md" | "lg" | "xl" | (string & {});
|
|
12
|
+
type UIRadius = "none" | "sm" | "md" | "lg" | "full" | (string & {});
|
|
13
13
|
/**
|
|
14
14
|
* UI Component Contracts
|
|
15
15
|
* This acts as the source of truth for the SDUI protocol.
|
|
@@ -34,6 +34,8 @@ interface UIContract {
|
|
|
34
34
|
width?: UIWidth;
|
|
35
35
|
height?: "auto" | "full";
|
|
36
36
|
group?: boolean;
|
|
37
|
+
flex?: number;
|
|
38
|
+
overflow?: "hidden" | "visible" | "scroll" | "auto";
|
|
37
39
|
};
|
|
38
40
|
col: {
|
|
39
41
|
align?: UIAlign;
|
|
@@ -45,6 +47,8 @@ interface UIContract {
|
|
|
45
47
|
background?: UIColor;
|
|
46
48
|
radius?: UIRadius;
|
|
47
49
|
group?: boolean;
|
|
50
|
+
flex?: number;
|
|
51
|
+
overflow?: "hidden" | "visible" | "scroll" | "auto";
|
|
48
52
|
};
|
|
49
53
|
box: {
|
|
50
54
|
padding?: UISpacing;
|
|
@@ -61,6 +65,8 @@ interface UIContract {
|
|
|
61
65
|
height?: "auto" | "full";
|
|
62
66
|
shadow?: UIShadow;
|
|
63
67
|
group?: boolean;
|
|
68
|
+
flex?: number;
|
|
69
|
+
overflow?: "hidden" | "visible" | "scroll" | "auto";
|
|
64
70
|
};
|
|
65
71
|
spacer: {
|
|
66
72
|
size?: UISpacing;
|
|
@@ -131,6 +137,7 @@ interface UIContract {
|
|
|
131
137
|
list: {
|
|
132
138
|
padding?: UISpacing;
|
|
133
139
|
gap?: UISpacing;
|
|
140
|
+
width?: UIWidth;
|
|
134
141
|
};
|
|
135
142
|
listItem: {
|
|
136
143
|
onClickAction?: Event;
|
|
@@ -261,6 +268,9 @@ interface UIContract {
|
|
|
261
268
|
welcomeMessage?: string;
|
|
262
269
|
suggestions?: string[];
|
|
263
270
|
};
|
|
271
|
+
themeToggle: {
|
|
272
|
+
theme?: "light" | "dark" | "system";
|
|
273
|
+
};
|
|
264
274
|
}
|
|
265
275
|
type UINode<T extends keyof UIContract = keyof UIContract> = {
|
|
266
276
|
type: T;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@melony/ui-kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"react": "^18.0.0 || ^19.0.0",
|
|
30
30
|
"react-dom": "^18.0.0 || ^19.0.0",
|
|
31
|
-
"melony": "0.2.
|
|
31
|
+
"melony": "0.2.7"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"react": "^19.0.0",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"typescript": "^5.5.4",
|
|
40
40
|
"rimraf": "^5.0.10",
|
|
41
41
|
"@types/node": "^20.14.10",
|
|
42
|
-
"melony": "0.2.
|
|
42
|
+
"melony": "0.2.7"
|
|
43
43
|
},
|
|
44
44
|
"publishConfig": {
|
|
45
45
|
"access": "public"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/server.ts"],"names":[],"mappings":"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","file":"chunk-H3YMHUQF.js","sourcesContent":["import { UIContract, UINode, UIEvent } from \"./types\";\n\nexport * from \"./types\";\n\n/**\n * Helper to create UI events in Melony actions.\n */\nexport const ui = {\n /**\n * Creates a UI node.\n */\n node: <T extends keyof UIContract>(\n type: T,\n props: UIContract[T] = {} as any,\n children: UINode<any>[] = []\n ): UINode<T> => ({\n type,\n props,\n children,\n }),\n\n /**\n * Wraps a UI node in an event.\n */\n event: (node: UINode): UIEvent => ({\n type: \"ui\",\n data: node,\n }),\n\n card: (props: UIContract[\"card\"] = {}, children: UINode[] = []) =>\n ui.node(\"card\", props, children),\n\n button: (props: UIContract[\"button\"], children: UINode[] = []) =>\n ui.node(\"button\", props, children),\n\n text: (value: string, props: Partial<UIContract[\"text\"]> = {}) =>\n ui.node(\"text\", { value, ...props }),\n\n heading: (value: string, level: UIContract[\"heading\"][\"level\"] = 1, props: Partial<UIContract[\"heading\"]> = {}) =>\n ui.node(\"heading\", { value, level, ...props }),\n\n row: (props: UIContract[\"row\"] = {}, children: UINode[] = []) =>\n ui.node(\"row\", props, children),\n\n col: (props: UIContract[\"col\"] = {}, children: UINode[] = []) =>\n ui.node(\"col\", props, children),\n\n box: (props: UIContract[\"box\"] = {}, children: UINode[] = []) =>\n ui.node(\"box\", props, children),\n\n badge: (label: string, variant: UIContract[\"badge\"][\"variant\"] = \"primary\", props: Partial<UIContract[\"badge\"]> = {}) =>\n ui.node(\"badge\", { label, variant, ...props }),\n\n input: (name: string, label?: string, props: Partial<UIContract[\"input\"]> = {}) =>\n ui.node(\"input\", { name, label, ...props }),\n\n textarea: (name: string, label?: string, props: Partial<UIContract[\"textarea\"]> = {}) =>\n ui.node(\"textarea\", { name, label, ...props }),\n\n select: (name: string, options: UIContract[\"select\"][\"options\"], label?: string, props: Partial<UIContract[\"select\"]> = {}) =>\n ui.node(\"select\", { name, options, label, ...props }),\n\n checkbox: (name: string, label?: string, props: Partial<UIContract[\"checkbox\"]> = {}) =>\n ui.node(\"checkbox\", { name, label, ...props }),\n\n form: (props: UIContract[\"form\"] = {}, children: UINode[] = []) =>\n ui.node(\"form\", props, children),\n\n icon: (name: string, props: Partial<UIContract[\"icon\"]> = {}) =>\n ui.node(\"icon\", { name, ...props }),\n\n image: (src: string, alt?: string, props: Partial<UIContract[\"image\"]> = {}) =>\n ui.node(\"image\", { src, alt, ...props }),\n\n spacer: (props: UIContract[\"spacer\"] = {}) =>\n ui.node(\"spacer\", props),\n\n divider: (props: UIContract[\"divider\"] = {}) =>\n ui.node(\"divider\", props),\n\n list: (props: UIContract[\"list\"] = {}, children: UINode[] = []) =>\n ui.node(\"list\", props, children),\n\n listItem: (props: UIContract[\"listItem\"] = {}, children: UINode[] = []) =>\n ui.node(\"listItem\", props, children),\n\n // organisms\n thread: (props: UIContract[\"thread\"] = {}, children: UINode[] = []) =>\n ui.node(\"thread\", props, children),\n};\n"]}
|