1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
// @ts-nocheck
import { createSignal } from "solid-js"
import * as mod from "./basic-tool"
import { create } from "../storybook/scaffold"
const docs = `### Overview
Expandable tool panel with a structured trigger and optional details.
Use structured triggers for consistent layout; custom triggers allowed.
### API
- Required: \`icon\` and \`trigger\` (structured or custom JSX).
- Optional: \`status\`, \`defaultOpen\`, \`forceOpen\`, \`defer\`, \`locked\`.
### Variants and states
- Pending/running status animates the title via TextShimmer.
### Behavior
- Uses Collapsible; can defer content rendering until open.
- Locked state prevents closing.
### Accessibility
- TODO: confirm trigger semantics and aria labeling.
### Theming/tokens
- Uses \`data-component="tool-trigger"\` and related slots.
`
const story = create({
title: "UI/Basic Tool",
mod,
args: {
icon: "mcp",
defaultOpen: true,
trigger: {
title: "Basic Tool",
subtitle: "Example subtitle",
args: ["--flag", "value"],
},
children: "Details content",
},
})
export default {
title: "UI/Basic Tool",
id: "components-basic-tool",
component: story.meta.component,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: docs,
},
},
},
}
export const Basic = story.Basic
export const Pending = {
args: {
status: "pending",
trigger: {
title: "Running tool",
subtitle: "Working...",
},
children: "Progress details",
},
}
export const Locked = {
args: {
locked: true,
trigger: {
title: "Locked tool",
subtitle: "Cannot close",
},
children: "Locked details",
},
}
export const Deferred = {
args: {
defer: true,
defaultOpen: false,
trigger: {
title: "Deferred tool",
subtitle: "Content mounts on open",
},
children: "Deferred content",
},
}
export const ForceOpen = {
args: {
forceOpen: true,
trigger: {
title: "Forced open",
subtitle: "Cannot close",
},
children: "Forced content",
},
}
export const HideDetails = {
args: {
hideDetails: true,
trigger: {
title: "Summary only",
subtitle: "Details hidden",
},
children: "Hidden content",
},
}
export const SubtitleAction = {
render: () => {
const [message, setMessage] = createSignal("Subtitle not clicked")
return (
<div style={{ display: "grid", gap: "8px" }}>
<div style={{ "font-size": "12px", color: "var(--text-weak)" }}>{message()}</div>
<mod.BasicTool
icon="mcp"
trigger={{ title: "Clickable subtitle", subtitle: "Click me" }}
onSubtitleClick={() => setMessage("Subtitle clicked")}
>
Subtitle action details
</mod.BasicTool>
</div>
)
},
}
|
