@tutti-os/ui-system 0.0.1
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/AGENTS.md +146 -0
- package/LICENSE +202 -0
- package/README.md +97 -0
- package/agent/install-skill.mjs +241 -0
- package/agent/nextop-ui-system/SKILL.md +227 -0
- package/agent/nextop-ui-system/references/extract-base-component.md +87 -0
- package/agent/nextop-ui-system/references/maintain-inventory.md +45 -0
- package/agent/nextop-ui-system/references/promote-business-component.md +316 -0
- package/agent/nextop-ui-system/references/use-existing-component.md +37 -0
- package/agent/nextop-ui-system/scripts/create-business-preview.mjs +658 -0
- package/dist/chunk-2AUYRRDG.js +3078 -0
- package/dist/chunk-2AUYRRDG.js.map +1 -0
- package/dist/chunk-DGPY4WP3.js +11 -0
- package/dist/chunk-DGPY4WP3.js.map +1 -0
- package/dist/chunk-GX3U3V36.js +70 -0
- package/dist/chunk-GX3U3V36.js.map +1 -0
- package/dist/chunk-UTUVPSKL.js +873 -0
- package/dist/chunk-UTUVPSKL.js.map +1 -0
- package/dist/chunk-XHA7R2WC.js +292 -0
- package/dist/chunk-XHA7R2WC.js.map +1 -0
- package/dist/components/index.d.ts +360 -0
- package/dist/components/index.js +221 -0
- package/dist/components/index.js.map +1 -0
- package/dist/date-format.d.ts +6 -0
- package/dist/date-format.js +11 -0
- package/dist/date-format.js.map +1 -0
- package/dist/dev-vite.d.ts +9 -0
- package/dist/dev-vite.js +583 -0
- package/dist/dev-vite.js.map +1 -0
- package/dist/icons/index.d.ts +112 -0
- package/dist/icons/index.js +191 -0
- package/dist/icons/index.js.map +1 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +419 -0
- package/dist/index.js.map +1 -0
- package/dist/metadata/components.json +2819 -0
- package/dist/metadata/components.schema.json +110 -0
- package/dist/metadata/index.d.ts +27 -0
- package/dist/metadata/index.js +2827 -0
- package/dist/metadata/index.js.map +1 -0
- package/dist/styles/base.css +170 -0
- package/dist/styles/index.css +4 -0
- package/dist/styles/semantic.css +50 -0
- package/dist/styles/theme.css +366 -0
- package/dist/utils.d.ts +5 -0
- package/dist/utils.js +7 -0
- package/dist/utils.js.map +1 -0
- package/package.json +118 -0
- package/ui-system.md +671 -0
package/AGENTS.md
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
# AGENTS.md
|
|
2
|
+
|
|
3
|
+
## Scope
|
|
4
|
+
|
|
5
|
+
This file applies to `packages/ui/system/*`.
|
|
6
|
+
|
|
7
|
+
`packages/ui/system` is the source package for `@tutti-os/ui-system`, the
|
|
8
|
+
shared Nextop UI component library. It owns shared CSS tokens, theme styles,
|
|
9
|
+
icon exports, presentation primitives, reusable host-agnostic business display
|
|
10
|
+
components, component metadata, storyboard inventory, and the bundled
|
|
11
|
+
`nextop-ui-system` agent skill.
|
|
12
|
+
|
|
13
|
+
Before changing components, icons, metadata, styles, storyboard examples, or
|
|
14
|
+
the bundled skill, read `ui-system.md`.
|
|
15
|
+
|
|
16
|
+
UI-system design compliance is a release gate for this package, not a follow-up
|
|
17
|
+
task. If a promoted component does not yet follow the shared token model,
|
|
18
|
+
surface language, primitive vocabulary, and storyboard evidence standard, do
|
|
19
|
+
not report it as complete.
|
|
20
|
+
|
|
21
|
+
## Public API
|
|
22
|
+
|
|
23
|
+
Stable public imports are:
|
|
24
|
+
|
|
25
|
+
- `@tutti-os/ui-system`
|
|
26
|
+
- `@tutti-os/ui-system/components`
|
|
27
|
+
- `@tutti-os/ui-system/metadata`
|
|
28
|
+
- `@tutti-os/ui-system/icons`
|
|
29
|
+
- `@tutti-os/ui-system/styles.css`
|
|
30
|
+
- `@tutti-os/ui-system/utils`
|
|
31
|
+
|
|
32
|
+
Rules:
|
|
33
|
+
|
|
34
|
+
- prefer adding exports to an existing public barrel before introducing a new
|
|
35
|
+
public subpath
|
|
36
|
+
- do not expose `src/*` layout as public API
|
|
37
|
+
- do not encourage per-file deep imports such as
|
|
38
|
+
`@tutti-os/ui-system/components/button`
|
|
39
|
+
- if package exports change intentionally, update both the package exports and
|
|
40
|
+
the UI-boundary check script
|
|
41
|
+
|
|
42
|
+
## Component Library Rules
|
|
43
|
+
|
|
44
|
+
- keep `base` components low-level, generic, and
|
|
45
|
+
frontend-foundation-focused
|
|
46
|
+
- allow `business` components only when they are reusable business display
|
|
47
|
+
components that remain host-agnostic and side-effect-free
|
|
48
|
+
- business components may expose domain display props such as workspace, file,
|
|
49
|
+
task, agent, status, permission, and callbacks, but must not own daemon,
|
|
50
|
+
Electron, router, store, query, filesystem, persistence, or workflow calls
|
|
51
|
+
- before promoting a business component, scan source usage, build a
|
|
52
|
+
code-evidence state matrix, and define the public props boundary from that
|
|
53
|
+
evidence; after that, promote it directly into `packages/ui/system` and add
|
|
54
|
+
storyboard coverage for the accepted states
|
|
55
|
+
- business components should compose `base` primitives instead of recreating
|
|
56
|
+
buttons, fields, dialogs, cards, icons, or overlays
|
|
57
|
+
- promoted components and their storyboard examples must use UI-system semantic
|
|
58
|
+
tokens and approved shared CSS variables; do not leave raw `hex`,
|
|
59
|
+
`rgb(...)`, `rgba(...)`, ad hoc gradients, or app-local palette values in the
|
|
60
|
+
final UI-system implementation unless they already come from approved shared
|
|
61
|
+
tokens
|
|
62
|
+
- storyboard coverage must show the component's real promoted surface and
|
|
63
|
+
states; do not rely on surrounding docs chrome or wrapper panels to mask
|
|
64
|
+
component-level visual drift
|
|
65
|
+
- UI storyboard foundation content is JSON-driven. When changing documented
|
|
66
|
+
token, color, typography, spacing, radius, motion, or overview display data,
|
|
67
|
+
edit `apps/ui-storyboard/src/foundation/*.json` directly instead of
|
|
68
|
+
hardcoding those values in `apps/ui-storyboard/src/App.tsx`
|
|
69
|
+
- migrated consumers must end on the same UI-system visual implementation for
|
|
70
|
+
the promoted surface; temporary bridges are allowed only for wiring, not as a
|
|
71
|
+
separate long-lived token or styling system
|
|
72
|
+
- treat this package as the shared shadcn and Radix host package
|
|
73
|
+
- when a primitive exists in the shadcn registry, acquire it through shadcn CLI
|
|
74
|
+
targeted at this package instead of handwriting the component body
|
|
75
|
+
- keep `components.json` and package aliases usable enough that CLI download
|
|
76
|
+
remains the default path for shared primitives
|
|
77
|
+
- after CLI acquisition, limit edits to narrow package-specific adaptation such
|
|
78
|
+
as icon routing, import aliases, stable exports, and boundary-check fixes
|
|
79
|
+
- keep CSS variables as the source of truth for token values
|
|
80
|
+
- prefer semantic token naming over raw palette leakage in public APIs
|
|
81
|
+
- keep helper exports minimal and tied to primitive support, not general
|
|
82
|
+
convenience reuse
|
|
83
|
+
- build primitives for a calm workbench shell, not for marketing-card theatrics
|
|
84
|
+
- every public component, icon, utility, or style entry must have metadata with
|
|
85
|
+
a stable readable `id` and `layer`
|
|
86
|
+
- use the single `nextop-ui-system` skill for component reuse, extraction,
|
|
87
|
+
base/business classification, metadata, and storyboard work
|
|
88
|
+
|
|
89
|
+
## React Component Splitting Rules
|
|
90
|
+
|
|
91
|
+
- default to one component per directory; keep the component file, tests,
|
|
92
|
+
stories, local styles, and tightly coupled implementation-detail helpers
|
|
93
|
+
colocated inside that directory
|
|
94
|
+
- default to one React component per file; allow multiple small stateless
|
|
95
|
+
helpers in one file only when they are tightly coupled implementation detail
|
|
96
|
+
of the exported component
|
|
97
|
+
- split presentational components away from host wiring; components promoted
|
|
98
|
+
into ui-system must receive data, labels, status, and callbacks through props
|
|
99
|
+
rather than owning side effects or app workflow
|
|
100
|
+
- if a component does not need internal state or refs, prefer a plain function
|
|
101
|
+
component; introduce heavier component structure only when state, refs, or
|
|
102
|
+
lifecycle-like coordination is actually required
|
|
103
|
+
- when behavior is reusable but host-owned, extract it into caller-owned hooks,
|
|
104
|
+
adapters, or controller code instead of embedding that logic in the ui-system
|
|
105
|
+
component body
|
|
106
|
+
- do not use mixin-style reuse or implicit component coupling; prefer explicit
|
|
107
|
+
composition through child components, slots, helper modules, or narrow
|
|
108
|
+
wrappers
|
|
109
|
+
- keep component APIs semantic and stable; do not repurpose DOM prop names such
|
|
110
|
+
as `style` or `className` to carry business meaning when a clearer prop like
|
|
111
|
+
`variant`, `tone`, `status`, or `layout` is intended
|
|
112
|
+
- use spread props sparingly on public components; pass explicit props whenever
|
|
113
|
+
possible so the boundary stays readable and host-agnostic
|
|
114
|
+
- list and collection components must render with stable identity from caller
|
|
115
|
+
data; do not rely on array index keys in promoted UI-system surfaces
|
|
116
|
+
- when a component grows multiple visual regions or branches, first try to
|
|
117
|
+
split subparts into local render helpers or child components before adding
|
|
118
|
+
more mode booleans to one large component
|
|
119
|
+
- avoid boolean-prop sprawl for mutually exclusive modes; prefer a finite
|
|
120
|
+
variant, discriminated union, explicit slot, or separate subcomponent when
|
|
121
|
+
states represent distinct rendering modes
|
|
122
|
+
- keep user-visible copy caller-owned by default; if text changes by host,
|
|
123
|
+
locale, or workflow, expose it through props, labels, or children instead of
|
|
124
|
+
hardcoding it inside the shared component
|
|
125
|
+
- use the filename as the component name and keep exported component names in
|
|
126
|
+
PascalCase so file boundaries stay obvious during promotion, review, and
|
|
127
|
+
migration
|
|
128
|
+
|
|
129
|
+
## Validation
|
|
130
|
+
|
|
131
|
+
- Run `pnpm typecheck`
|
|
132
|
+
- Run `pnpm check:ui-boundaries`
|
|
133
|
+
- If component metadata changed, run `node tools/scripts/check-ui-metadata.mjs`
|
|
134
|
+
- If storyboard inventory changed, run
|
|
135
|
+
`pnpm --filter @tutti-os/ui-storyboard typecheck`
|
|
136
|
+
- If a change affects desktop integration, also run
|
|
137
|
+
`pnpm --filter @tutti-os/desktop build`
|
|
138
|
+
- In the handoff, explicitly state whether tokens, primitives, storyboard
|
|
139
|
+
surface, and migrated consumer all comply with the UI-system standard; if any
|
|
140
|
+
of those are still divergent, the work is not complete
|
|
141
|
+
|
|
142
|
+
## Related Docs
|
|
143
|
+
|
|
144
|
+
- `ui-system.md`
|
|
145
|
+
- `docs/conventions/desktop-visual-language.md`
|
|
146
|
+
- `docs/conventions/local-git-hooks.md`
|
package/LICENSE
ADDED
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
|
|
2
|
+
Apache License
|
|
3
|
+
Version 2.0, January 2004
|
|
4
|
+
http://www.apache.org/licenses/
|
|
5
|
+
|
|
6
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
7
|
+
|
|
8
|
+
1. Definitions.
|
|
9
|
+
|
|
10
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
11
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
12
|
+
|
|
13
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
14
|
+
the copyright owner that is granting the License.
|
|
15
|
+
|
|
16
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
17
|
+
other entities that control, are controlled by, or are under common
|
|
18
|
+
control with that entity. For the purposes of this definition,
|
|
19
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
20
|
+
direction or management of such entity, whether by contract or
|
|
21
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
22
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
23
|
+
|
|
24
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
25
|
+
exercising permissions granted by this License.
|
|
26
|
+
|
|
27
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
28
|
+
including but not limited to software source code, documentation
|
|
29
|
+
source, and configuration files.
|
|
30
|
+
|
|
31
|
+
"Object" form shall mean any form resulting from mechanical
|
|
32
|
+
transformation or translation of a Source form, including but
|
|
33
|
+
not limited to compiled object code, generated documentation,
|
|
34
|
+
and conversions to other media types.
|
|
35
|
+
|
|
36
|
+
"Work" shall mean the work of authorship, whether in Source or
|
|
37
|
+
Object form, made available under the License, as indicated by a
|
|
38
|
+
copyright notice that is included in or attached to the work
|
|
39
|
+
(an example is provided in the Appendix below).
|
|
40
|
+
|
|
41
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
42
|
+
form, that is based on (or derived from) the Work and for which the
|
|
43
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
44
|
+
represent, as a whole, an original work of authorship. For the purposes
|
|
45
|
+
of this License, Derivative Works shall not include works that remain
|
|
46
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
|
47
|
+
the Work and Derivative Works thereof.
|
|
48
|
+
|
|
49
|
+
"Contribution" shall mean any work of authorship, including
|
|
50
|
+
the original version of the Work and any modifications or additions
|
|
51
|
+
to that Work or Derivative Works thereof, that is intentionally
|
|
52
|
+
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
53
|
+
or by an individual or Legal Entity authorized to submit on behalf of
|
|
54
|
+
the copyright owner. For the purposes of this definition, "submitted"
|
|
55
|
+
means any form of electronic, verbal, or written communication sent
|
|
56
|
+
to the Licensor or its representatives, including but not limited to
|
|
57
|
+
communication on electronic mailing lists, source code control systems,
|
|
58
|
+
and issue tracking systems that are managed by, or on behalf of, the
|
|
59
|
+
Licensor for the purpose of discussing and improving the Work, but
|
|
60
|
+
excluding communication that is conspicuously marked or otherwise
|
|
61
|
+
designated in writing by the copyright owner as "Not a Contribution."
|
|
62
|
+
|
|
63
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
64
|
+
on behalf of whom a Contribution has been received by Licensor and
|
|
65
|
+
subsequently incorporated within the Work.
|
|
66
|
+
|
|
67
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
68
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
69
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
70
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
71
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
72
|
+
Work and such Derivative Works in Source or Object form.
|
|
73
|
+
|
|
74
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
75
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
76
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
77
|
+
(except as stated in this section) patent license to make, have made,
|
|
78
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
79
|
+
where such license applies only to those patent claims licensable
|
|
80
|
+
by such Contributor that are necessarily infringed by their
|
|
81
|
+
Contribution(s) alone or by combination of their Contribution(s)
|
|
82
|
+
with the Work to which such Contribution(s) was submitted. If You
|
|
83
|
+
institute patent litigation against any entity (including a
|
|
84
|
+
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
85
|
+
or a Contribution incorporated within the Work constitutes direct
|
|
86
|
+
or contributory patent infringement, then any patent licenses
|
|
87
|
+
granted to You under this License for that Work shall terminate
|
|
88
|
+
as of the date such litigation is filed.
|
|
89
|
+
|
|
90
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
91
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
92
|
+
modifications, and in Source or Object form, provided that You
|
|
93
|
+
meet the following conditions:
|
|
94
|
+
|
|
95
|
+
(a) You must give any other recipients of the Work or
|
|
96
|
+
Derivative Works a copy of this License; and
|
|
97
|
+
|
|
98
|
+
(b) You must cause any modified files to carry prominent notices
|
|
99
|
+
stating that You changed the files; and
|
|
100
|
+
|
|
101
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
102
|
+
that You distribute, all copyright, patent, trademark, and
|
|
103
|
+
attribution notices from the Source form of the Work,
|
|
104
|
+
excluding those notices that do not pertain to any part of
|
|
105
|
+
the Derivative Works; and
|
|
106
|
+
|
|
107
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
108
|
+
distribution, then any Derivative Works that You distribute must
|
|
109
|
+
include a readable copy of the attribution notices contained
|
|
110
|
+
within such NOTICE file, excluding those notices that do not
|
|
111
|
+
pertain to any part of the Derivative Works, in at least one
|
|
112
|
+
of the following places: within a NOTICE text file distributed
|
|
113
|
+
as part of the Derivative Works; within the Source form or
|
|
114
|
+
documentation, if provided along with the Derivative Works; or,
|
|
115
|
+
within a display generated by the Derivative Works, if and
|
|
116
|
+
wherever such third-party notices normally appear. The contents
|
|
117
|
+
of the NOTICE file are for informational purposes only and
|
|
118
|
+
do not modify the License. You may add Your own attribution
|
|
119
|
+
notices within Derivative Works that You distribute, alongside
|
|
120
|
+
or as an addendum to the NOTICE text from the Work, provided
|
|
121
|
+
that such additional attribution notices cannot be construed
|
|
122
|
+
as modifying the License.
|
|
123
|
+
|
|
124
|
+
You may add Your own copyright statement to Your modifications and
|
|
125
|
+
may provide additional or different license terms and conditions
|
|
126
|
+
for use, reproduction, or distribution of Your modifications, or
|
|
127
|
+
for any such Derivative Works as a whole, provided Your use,
|
|
128
|
+
reproduction, and distribution of the Work otherwise complies with
|
|
129
|
+
the conditions stated in this License.
|
|
130
|
+
|
|
131
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
132
|
+
any Contribution intentionally submitted for inclusion in the Work
|
|
133
|
+
by You to the Licensor shall be under the terms and conditions of
|
|
134
|
+
this License, without any additional terms or conditions.
|
|
135
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
|
136
|
+
the terms of any separate license agreement you may have executed
|
|
137
|
+
with Licensor regarding such Contributions.
|
|
138
|
+
|
|
139
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
140
|
+
names, trademarks, service marks, or product names of the Licensor,
|
|
141
|
+
except as required for reasonable and customary use in describing the
|
|
142
|
+
origin of the Work and reproducing the content of the NOTICE file.
|
|
143
|
+
|
|
144
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
145
|
+
agreed to in writing, Licensor provides the Work (and each
|
|
146
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
147
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
148
|
+
implied, including, without limitation, any warranties or conditions
|
|
149
|
+
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
150
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
151
|
+
appropriateness of using or redistributing the Work and assume any
|
|
152
|
+
risks associated with Your exercise of permissions under this License.
|
|
153
|
+
|
|
154
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
|
155
|
+
whether in tort (including negligence), contract, or otherwise,
|
|
156
|
+
unless required by applicable law (such as deliberate and grossly
|
|
157
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
|
158
|
+
liable to You for damages, including any direct, indirect, special,
|
|
159
|
+
incidental, or consequential damages of any character arising as a
|
|
160
|
+
result of this License or out of the use or inability to use the
|
|
161
|
+
Work (including but not limited to damages for loss of goodwill,
|
|
162
|
+
work stoppage, computer failure or malfunction, or any and all
|
|
163
|
+
other commercial damages or losses), even if such Contributor
|
|
164
|
+
has been advised of the possibility of such damages.
|
|
165
|
+
|
|
166
|
+
9. Accepting Warranty or Additional Liability. While redistributing
|
|
167
|
+
the Work or Derivative Works thereof, You may choose to offer,
|
|
168
|
+
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
169
|
+
or other liability obligations and/or rights consistent with this
|
|
170
|
+
License. However, in accepting such obligations, You may act only
|
|
171
|
+
on Your own behalf and on Your sole responsibility, not on behalf
|
|
172
|
+
of any other Contributor, and only if You agree to indemnify,
|
|
173
|
+
defend, and hold each Contributor harmless for any liability
|
|
174
|
+
incurred by, or claims asserted against, such Contributor by reason
|
|
175
|
+
of your accepting any such warranty or additional liability.
|
|
176
|
+
|
|
177
|
+
END OF TERMS AND CONDITIONS
|
|
178
|
+
|
|
179
|
+
APPENDIX: How to apply the Apache License to your work.
|
|
180
|
+
|
|
181
|
+
To apply the Apache License to your work, attach the following
|
|
182
|
+
boilerplate notice, with the fields enclosed by brackets "[]"
|
|
183
|
+
replaced with your own identifying information. (Don't include
|
|
184
|
+
the brackets!) The text should be enclosed in the appropriate
|
|
185
|
+
comment syntax for the file format. We also recommend that a
|
|
186
|
+
file or class name and description of purpose be included on the
|
|
187
|
+
same "printed page" as the copyright notice for easier
|
|
188
|
+
identification within third-party archives.
|
|
189
|
+
|
|
190
|
+
Copyright [yyyy] [name of copyright owner]
|
|
191
|
+
|
|
192
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
193
|
+
you may not use this file except in compliance with the License.
|
|
194
|
+
You may obtain a copy of the License at
|
|
195
|
+
|
|
196
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
197
|
+
|
|
198
|
+
Unless required by applicable law or agreed to in writing, software
|
|
199
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
200
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
201
|
+
See the License for the specific language governing permissions and
|
|
202
|
+
limitations under the License.
|
package/README.md
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# @tutti-os/ui-system
|
|
2
|
+
|
|
3
|
+
Shared Nextop UI tokens, styles, icons, and low-level React primitives.
|
|
4
|
+
|
|
5
|
+
This package is published to npm as `@tutti-os/ui-system`.
|
|
6
|
+
|
|
7
|
+
Import the stylesheet once from the renderer or application shell:
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import "@tutti-os/ui-system/styles.css";
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Application code should prefer the root package export and the documented stable
|
|
14
|
+
subpaths over deep imports from internal files.
|
|
15
|
+
|
|
16
|
+
## External Development
|
|
17
|
+
|
|
18
|
+
External consumers should install the package normally:
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
pnpm add @tutti-os/ui-system
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
For local source sync from a Nextop checkout, start the UI system dev server:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
pnpm --filter @tutti-os/ui-system dev:server
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Then add the Vite plugin in the external app:
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
import { nextopUISystemDev } from "@tutti-os/ui-system/dev-vite";
|
|
34
|
+
|
|
35
|
+
export default defineConfig({
|
|
36
|
+
plugins: [nextopUISystemDev()]
|
|
37
|
+
});
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
When the dev server is reachable, the plugin mirrors the allowed UI-system
|
|
41
|
+
source and skill-support files into `.nextop-ui-system-dev/` and aliases the
|
|
42
|
+
stable package entrypoints to that cache. When the dev server is unavailable,
|
|
43
|
+
resolution falls back to the installed package in `node_modules`.
|
|
44
|
+
|
|
45
|
+
Add the generated cache to the external app's `.gitignore`:
|
|
46
|
+
|
|
47
|
+
```text
|
|
48
|
+
.nextop-ui-system-dev/
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
If the external app uses Tailwind CSS, include both the installed package output
|
|
52
|
+
and the generated dev cache in the app's Tailwind source scan:
|
|
53
|
+
|
|
54
|
+
```css
|
|
55
|
+
@source "../node_modules/@tutti-os/ui-system/dist";
|
|
56
|
+
@source "../.nextop-ui-system-dev";
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Agent Usage
|
|
60
|
+
|
|
61
|
+
Coding agents should read component metadata before creating or promoting UI:
|
|
62
|
+
|
|
63
|
+
```ts
|
|
64
|
+
import { uiSystemMetadata } from "@tutti-os/ui-system/metadata";
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
When promoting business UI into this package, use the bundled
|
|
68
|
+
`agent/nextop-ui-system/SKILL.md` skill when it is available. In the source
|
|
69
|
+
checkout, also read `AGENTS.md`, `ui-system.md`, and
|
|
70
|
+
`docs/conventions/desktop-visual-language.md`. The durable rules are:
|
|
71
|
+
|
|
72
|
+
1. prefer existing metadata entries before creating a component
|
|
73
|
+
2. classify the component as `base` or `business`
|
|
74
|
+
3. keep business components host-agnostic and side-effect-free
|
|
75
|
+
4. before promoting a business component, scan source usage and define the
|
|
76
|
+
public props boundary from code evidence
|
|
77
|
+
5. compose business components from base primitives
|
|
78
|
+
6. add metadata, stable exports, and storyboard examples for public UI
|
|
79
|
+
7. run metadata and boundary validation before shipping
|
|
80
|
+
|
|
81
|
+
External repositories can install the bundled skill into their local Codex
|
|
82
|
+
skill directory with one command:
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
pnpm exec nextop-ui-system-install-skill
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
This copies the package skill into:
|
|
89
|
+
|
|
90
|
+
```text
|
|
91
|
+
.codex/skills/nextop-ui-system/SKILL.md
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
When `.nextop-ui-system-dev/` is present, the installer prefers the synced
|
|
95
|
+
source checkout so the installed skill and bundled UI-system rules stay aligned
|
|
96
|
+
with the current local UI-system source. The installer does not overwrite a
|
|
97
|
+
locally modified skill unless `--force` is provided.
|
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import { constants } from "node:fs";
|
|
4
|
+
import {
|
|
5
|
+
access,
|
|
6
|
+
cp,
|
|
7
|
+
mkdir,
|
|
8
|
+
readdir,
|
|
9
|
+
readFile,
|
|
10
|
+
rm,
|
|
11
|
+
stat
|
|
12
|
+
} from "node:fs/promises";
|
|
13
|
+
import { dirname, join, relative, resolve } from "node:path";
|
|
14
|
+
import { fileURLToPath } from "node:url";
|
|
15
|
+
|
|
16
|
+
const packageRoot = dirname(dirname(fileURLToPath(import.meta.url)));
|
|
17
|
+
const skillName = "nextop-ui-system";
|
|
18
|
+
const devCacheDirectoryName = ".nextop-ui-system-dev";
|
|
19
|
+
const companionFiles = ["AGENTS.md", "ui-system.md"];
|
|
20
|
+
|
|
21
|
+
const options = parseArgs(process.argv.slice(2));
|
|
22
|
+
|
|
23
|
+
if (options.help) {
|
|
24
|
+
printHelp();
|
|
25
|
+
process.exit(0);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const targetRoot = resolve(options.cwd, ".codex", "skills");
|
|
29
|
+
const targetDirectory = join(targetRoot, skillName);
|
|
30
|
+
const sourceRoot = await resolveSourceRoot(options.cwd);
|
|
31
|
+
const sourceDirectory = join(sourceRoot, "agent", skillName);
|
|
32
|
+
|
|
33
|
+
await assertReadableDirectory(sourceDirectory);
|
|
34
|
+
await Promise.all(
|
|
35
|
+
companionFiles.map((fileName) =>
|
|
36
|
+
assertReadableFile(join(sourceRoot, fileName))
|
|
37
|
+
)
|
|
38
|
+
);
|
|
39
|
+
await mkdir(targetRoot, { recursive: true });
|
|
40
|
+
|
|
41
|
+
if (await pathExists(targetDirectory)) {
|
|
42
|
+
const targetStats = await stat(targetDirectory);
|
|
43
|
+
|
|
44
|
+
if (!targetStats.isDirectory()) {
|
|
45
|
+
throw new Error(`Target exists and is not a directory: ${targetDirectory}`);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
if (!options.force) {
|
|
49
|
+
if (await directoriesMatch(sourceRoot, sourceDirectory, targetDirectory)) {
|
|
50
|
+
console.log(
|
|
51
|
+
`nextop-ui-system skill already configured at ${targetDirectory}`
|
|
52
|
+
);
|
|
53
|
+
process.exit(0);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
throw new Error(
|
|
57
|
+
`Target skill already exists with local changes: ${targetDirectory}\n` +
|
|
58
|
+
"Run with --force to replace it."
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
await rm(targetDirectory, { recursive: true, force: true });
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
await cp(sourceDirectory, targetDirectory, {
|
|
66
|
+
errorOnExist: false,
|
|
67
|
+
force: true,
|
|
68
|
+
recursive: true
|
|
69
|
+
});
|
|
70
|
+
await Promise.all(
|
|
71
|
+
companionFiles.map((fileName) =>
|
|
72
|
+
cp(join(sourceRoot, fileName), join(targetDirectory, fileName), {
|
|
73
|
+
errorOnExist: false,
|
|
74
|
+
force: true,
|
|
75
|
+
recursive: false
|
|
76
|
+
})
|
|
77
|
+
)
|
|
78
|
+
);
|
|
79
|
+
|
|
80
|
+
console.log(`Installed nextop-ui-system skill to ${targetDirectory}`);
|
|
81
|
+
console.log(
|
|
82
|
+
"Agents can now load it from .codex/skills/nextop-ui-system/SKILL.md"
|
|
83
|
+
);
|
|
84
|
+
|
|
85
|
+
function parseArgs(args) {
|
|
86
|
+
const parsed = {
|
|
87
|
+
cwd: process.cwd(),
|
|
88
|
+
force: false,
|
|
89
|
+
help: false
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
for (let index = 0; index < args.length; index += 1) {
|
|
93
|
+
const arg = args[index];
|
|
94
|
+
|
|
95
|
+
if (arg === "--force") {
|
|
96
|
+
parsed.force = true;
|
|
97
|
+
continue;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
if (arg === "--help" || arg === "-h") {
|
|
101
|
+
parsed.help = true;
|
|
102
|
+
continue;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
if (arg === "--cwd") {
|
|
106
|
+
const cwd = args[index + 1];
|
|
107
|
+
if (!cwd) {
|
|
108
|
+
throw new Error("--cwd requires a directory path");
|
|
109
|
+
}
|
|
110
|
+
parsed.cwd = resolve(cwd);
|
|
111
|
+
index += 1;
|
|
112
|
+
continue;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
throw new Error(`Unknown option: ${arg}`);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
return parsed;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
function printHelp() {
|
|
122
|
+
console.log(`Usage: nextop-ui-system-install-skill [options]
|
|
123
|
+
|
|
124
|
+
Copies the bundled Nextop UI System skill into the current repository.
|
|
125
|
+
|
|
126
|
+
Options:
|
|
127
|
+
--cwd <path> Repository root to configure. Defaults to the current directory.
|
|
128
|
+
--force Replace an existing .codex/skills/nextop-ui-system directory.
|
|
129
|
+
-h, --help Show this help message.`);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
async function assertReadableDirectory(path) {
|
|
133
|
+
await access(path, constants.R_OK);
|
|
134
|
+
const pathStats = await stat(path);
|
|
135
|
+
|
|
136
|
+
if (!pathStats.isDirectory()) {
|
|
137
|
+
throw new Error(`Expected directory: ${path}`);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
async function assertReadableFile(path) {
|
|
142
|
+
await access(path, constants.R_OK);
|
|
143
|
+
const pathStats = await stat(path);
|
|
144
|
+
|
|
145
|
+
if (!pathStats.isFile()) {
|
|
146
|
+
throw new Error(`Expected file: ${path}`);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
async function pathExists(path) {
|
|
151
|
+
try {
|
|
152
|
+
await access(path, constants.F_OK);
|
|
153
|
+
return true;
|
|
154
|
+
} catch {
|
|
155
|
+
return false;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
async function resolveSourceRoot(cwd) {
|
|
160
|
+
const devCacheRoot = resolve(cwd, devCacheDirectoryName);
|
|
161
|
+
const devCacheSkillDirectory = join(devCacheRoot, "agent", skillName);
|
|
162
|
+
|
|
163
|
+
if (
|
|
164
|
+
(await pathExists(devCacheSkillDirectory)) &&
|
|
165
|
+
(await pathExists(join(devCacheRoot, "AGENTS.md"))) &&
|
|
166
|
+
(await pathExists(join(devCacheRoot, "ui-system.md")))
|
|
167
|
+
) {
|
|
168
|
+
return devCacheRoot;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
return packageRoot;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
async function directoriesMatch(sourceRoot, sourceDirectory, rightDirectory) {
|
|
175
|
+
const sourceEntries = await listBundleFiles(sourceRoot, sourceDirectory);
|
|
176
|
+
const leftEntries = sourceEntries.map((entry) => entry.targetRelativePath);
|
|
177
|
+
const rightEntries = await listFiles(rightDirectory, rightDirectory);
|
|
178
|
+
|
|
179
|
+
if (leftEntries.length !== rightEntries.length) {
|
|
180
|
+
return false;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
for (let index = 0; index < leftEntries.length; index += 1) {
|
|
184
|
+
if (leftEntries[index] !== rightEntries[index]) {
|
|
185
|
+
return false;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
const leftFile = sourceEntries[index].sourceAbsolutePath;
|
|
189
|
+
const rightFile = join(rightDirectory, rightEntries[index]);
|
|
190
|
+
|
|
191
|
+
const [leftContent, rightContent] = await Promise.all([
|
|
192
|
+
readFile(leftFile),
|
|
193
|
+
readFile(rightFile)
|
|
194
|
+
]);
|
|
195
|
+
|
|
196
|
+
if (!leftContent.equals(rightContent)) {
|
|
197
|
+
return false;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
return true;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
async function listBundleFiles(sourceRoot, sourceDirectory) {
|
|
205
|
+
const skillFiles = await listFiles(sourceDirectory, sourceDirectory);
|
|
206
|
+
const companionEntries = companionFiles.map((fileName) => ({
|
|
207
|
+
sourceAbsolutePath: join(sourceRoot, fileName),
|
|
208
|
+
targetRelativePath: fileName
|
|
209
|
+
}));
|
|
210
|
+
|
|
211
|
+
return skillFiles
|
|
212
|
+
.map((relativePath) => ({
|
|
213
|
+
sourceAbsolutePath: join(sourceDirectory, relativePath),
|
|
214
|
+
targetRelativePath: relativePath
|
|
215
|
+
}))
|
|
216
|
+
.concat(companionEntries)
|
|
217
|
+
.sort((left, right) =>
|
|
218
|
+
left.targetRelativePath.localeCompare(right.targetRelativePath)
|
|
219
|
+
);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
async function listFiles(rootDirectory, directory) {
|
|
223
|
+
const entries = await readdir(directory, { withFileTypes: true });
|
|
224
|
+
const files = await Promise.all(
|
|
225
|
+
entries.map(async (entry) => {
|
|
226
|
+
const absolutePath = join(directory, entry.name);
|
|
227
|
+
|
|
228
|
+
if (entry.isDirectory()) {
|
|
229
|
+
return listFiles(rootDirectory, absolutePath);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
if (!entry.isFile()) {
|
|
233
|
+
return [];
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
return relative(rootDirectory, absolutePath);
|
|
237
|
+
})
|
|
238
|
+
);
|
|
239
|
+
|
|
240
|
+
return files.flat().sort((left, right) => left.localeCompare(right));
|
|
241
|
+
}
|