@ai-matrx/context-menu 0.1.12 → 0.1.13
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/CHANGELOG.md +16 -0
- package/dist/styles.css +146 -0
- package/package.json +6 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,11 +1,27 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.1.13
|
|
4
|
+
### Unreleased
|
|
5
|
+
|
|
6
|
+
- New `@ai-matrx/context-menu/styles.css`: every style the drawn menu (live designed menu, builder
|
|
7
|
+
preview, Inspect) needs — popup position/z-index, rows, flyouts, search, sections, status marks,
|
|
8
|
+
its own button/input resets. Before this the package shipped no stylesheet and a designed menu
|
|
9
|
+
rendered unstyled in any host. Guard: `every-menu-class-ships-in-styles-css.test.ts`.
|
|
10
|
+
**Consumer action:** import `@ai-matrx/context-menu/styles.css` from the module that loads WITH
|
|
11
|
+
the menu on first open (matrx-frontend: `features/context-menu-host/on-open.tsx`), never globally.
|
|
12
|
+
|
|
3
13
|
## 0.1.12
|
|
4
14
|
|
|
5
15
|
Automatic changed-only republish (docs/metadata drift since the last tag — see
|
|
6
16
|
`git diff npm/context-menu/v0.1.11..npm/context-menu/v0.1.12 -- apps/shared/context-menu`).
|
|
7
17
|
No source changes intended and no consumer action required.
|
|
8
18
|
|
|
19
|
+
## 0.1.11
|
|
20
|
+
|
|
21
|
+
Automatic changed-only republish (docs/metadata drift since the last tag — see
|
|
22
|
+
`git diff npm/context-menu/v0.1.10..npm/context-menu/v0.1.11 -- apps/shared/context-menu`).
|
|
23
|
+
No source changes intended and no consumer action required.
|
|
24
|
+
|
|
9
25
|
## 0.1.10
|
|
10
26
|
|
|
11
27
|
Automatic changed-only republish (docs/metadata drift since the last tag — see
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
/* @ai-matrx/context-menu/styles.css — EVERY style the drawn menu (builder preview, live designed menu,
|
|
2
|
+
Inspect) needs. Colors are the design-system tokens (HSL triples). Self-contained on purpose: the
|
|
3
|
+
package never relies on the host's Tailwind scanning its dist, nor on the host's element reset —
|
|
4
|
+
the resets below are the menu's own. Guard: src/designed/__tests__/every-menu-class-ships-in-styles-css.test.ts.
|
|
5
|
+
A host imports it WITH the menu (matrx-frontend: features/context-menu-host/on-open.tsx), never globally. */
|
|
6
|
+
/* Zero-specificity resets (:where), so every .cm-* rule below outranks them. */
|
|
7
|
+
:where(.cm-menu, .cm-inspect), :where(.cm-menu, .cm-inspect) *, :where(.cm-menu, .cm-inspect) *::before, :where(.cm-menu, .cm-inspect) *::after { box-sizing: border-box; }
|
|
8
|
+
:where(.cm-menu) :where(button, input, kbd) { margin: 0; border: 0; padding: 0; font-family: inherit; font-size: inherit; line-height: inherit; -webkit-appearance: none; appearance: none; }
|
|
9
|
+
.cm-menu {
|
|
10
|
+
position: relative;
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
padding: 4px;
|
|
14
|
+
border: 1px solid hsl(var(--border));
|
|
15
|
+
border-radius: 10px;
|
|
16
|
+
background: hsl(var(--popover));
|
|
17
|
+
color: hsl(var(--popover-foreground));
|
|
18
|
+
box-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.25), 0 2px 6px rgb(0 0 0 / 0.08);
|
|
19
|
+
font-size: 13px;
|
|
20
|
+
line-height: 1.25;
|
|
21
|
+
user-select: none;
|
|
22
|
+
}
|
|
23
|
+
.cm-menu[data-density="compact"] { font-size: 12px; }
|
|
24
|
+
.cm-item {
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
gap: 8px;
|
|
28
|
+
width: 100%;
|
|
29
|
+
min-height: 30px;
|
|
30
|
+
padding: 4px 8px;
|
|
31
|
+
border-radius: 6px;
|
|
32
|
+
text-align: left;
|
|
33
|
+
background: transparent;
|
|
34
|
+
color: inherit;
|
|
35
|
+
cursor: default;
|
|
36
|
+
}
|
|
37
|
+
.cm-menu[data-density="compact"] .cm-item { min-height: 24px; padding: 2px 6px; }
|
|
38
|
+
.cm-item:hover:not([aria-disabled="true"]), .cm-tile:hover:not([aria-disabled="true"]),
|
|
39
|
+
.cm-item:focus-visible, .cm-tile:focus-visible, .cm-item:focus, .cm-tile:focus, .cm-item.cm-open {
|
|
40
|
+
background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); outline: none;
|
|
41
|
+
}
|
|
42
|
+
.cm-item[aria-disabled="true"], .cm-tile[aria-disabled="true"] { opacity: 0.45; }
|
|
43
|
+
.cm-menu:focus { outline: none; }
|
|
44
|
+
.cm-icon-slot { display: inline-flex; width: 16px; justify-content: center; flex: none; color: hsl(var(--muted-foreground)); }
|
|
45
|
+
.cm-icon { width: 16px; height: 16px; flex: none; }
|
|
46
|
+
.cm-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
|
|
47
|
+
.cm-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
48
|
+
.cm-hint { font-size: 11px; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
49
|
+
.cm-shortcut { font: inherit; font-size: 11px; color: hsl(var(--muted-foreground)); letter-spacing: 0.04em; }
|
|
50
|
+
.cm-count { flex: none; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
|
|
51
|
+
.cm-chev { color: hsl(var(--muted-foreground)); }
|
|
52
|
+
.cm-caret { display: inline-flex; width: 16px; justify-content: flex-end; color: hsl(var(--muted-foreground)); }
|
|
53
|
+
|
|
54
|
+
.cm-divider { height: 1px; margin: 4px 6px; background: hsl(var(--border)); }
|
|
55
|
+
.cm-section + .cm-section, .cm-item + .cm-section, .cm-sub + .cm-section { margin-top: 2px; }
|
|
56
|
+
.cm-section-label {
|
|
57
|
+
display: flex; align-items: center; justify-content: space-between; width: 100%;
|
|
58
|
+
padding: 6px 8px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
|
|
59
|
+
color: hsl(var(--muted-foreground)); background: transparent; text-align: left;
|
|
60
|
+
}
|
|
61
|
+
.cm-section[data-layout="row"] > .cm-section-body { display: flex; gap: 2px; padding: 2px; }
|
|
62
|
+
.cm-section[data-layout="grid"] > .cm-section-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px; }
|
|
63
|
+
.cm-tile {
|
|
64
|
+
display: inline-flex; flex: 1; align-items: center; justify-content: center;
|
|
65
|
+
height: 32px; border-radius: 6px; background: transparent; color: inherit;
|
|
66
|
+
}
|
|
67
|
+
.cm-sub { position: relative; }
|
|
68
|
+
.cm-flyout { position: absolute; left: calc(100% + 2px); top: -5px; z-index: 10; }
|
|
69
|
+
.cm-search { display: flex; align-items: center; gap: 6px; padding: 4px 8px 6px; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 4px; color: hsl(var(--muted-foreground)); }
|
|
70
|
+
.cm-search input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; outline: none; color: hsl(var(--popover-foreground)); font-size: 13px; }
|
|
71
|
+
.cm-empty { padding: 10px 8px; font-size: 12px; color: hsl(var(--muted-foreground)); text-align: center; }
|
|
72
|
+
.cm-hl { outline: 2px solid hsl(var(--primary)); outline-offset: -2px; border-radius: 6px; }
|
|
73
|
+
/* A flyout with no room on the right opens to the left (set by MenuPreview from its measured box). */
|
|
74
|
+
.cm-flyout[data-side="left"] { left: auto; right: calc(100% + 2px); }
|
|
75
|
+
.cm-flyout[data-side="below"] { left: 16px; top: calc(100% - 2px); }
|
|
76
|
+
|
|
77
|
+
/* Tones last and scoped under .cm-menu, so they outrank every row reset above (a reset declared later
|
|
78
|
+
in this file once beat the destructive red). Hover keeps the tone. */
|
|
79
|
+
.cm-menu .cm-ai .cm-icon-slot, .cm-menu .cm-tile.cm-ai { color: hsl(var(--primary)); }
|
|
80
|
+
.cm-menu .cm-item.cm-danger, .cm-menu .cm-tile.cm-danger, .cm-menu .cm-danger .cm-icon-slot { color: hsl(var(--destructive)); }
|
|
81
|
+
.cm-menu .cm-item.cm-danger:hover:not([aria-disabled="true"]), .cm-menu .cm-tile.cm-danger:hover:not([aria-disabled="true"]) {
|
|
82
|
+
background: hsl(var(--destructive) / 0.1);
|
|
83
|
+
color: hsl(var(--destructive));
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* A placeholder: "everything else of this kind goes here". Dashed, so it never reads as a real row. */
|
|
87
|
+
.cm-slot { border: 1px dashed hsl(var(--border)); color: hsl(var(--muted-foreground)); font-style: italic; }
|
|
88
|
+
.cm-slot .cm-count { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 999px; background: hsl(var(--muted)); }
|
|
89
|
+
.cm-runtime { font-size: 11px; padding: 4px 8px; color: hsl(var(--muted-foreground)); }
|
|
90
|
+
|
|
91
|
+
/* Colour: the design system's role inks and named hues. The icon takes it; with data-tone-label the
|
|
92
|
+
label too. Scoped under .cm-menu so no row reset outranks it. */
|
|
93
|
+
.cm-menu [data-tone="primary"] { --cm-tone: var(--primary-ink); }
|
|
94
|
+
.cm-menu [data-tone="success"] { --cm-tone: var(--success-ink); }
|
|
95
|
+
.cm-menu [data-tone="warning"] { --cm-tone: var(--warning-ink); }
|
|
96
|
+
.cm-menu [data-tone="info"] { --cm-tone: var(--info-ink); }
|
|
97
|
+
.cm-menu [data-tone="destructive"] { --cm-tone: var(--destructive-ink); }
|
|
98
|
+
.cm-menu [data-tone="sky"] { --cm-tone: var(--matrx-chip-sky-ink); }
|
|
99
|
+
.cm-menu [data-tone="blue"] { --cm-tone: var(--matrx-chip-blue-ink); }
|
|
100
|
+
.cm-menu [data-tone="indigo"] { --cm-tone: var(--matrx-chip-indigo-ink); }
|
|
101
|
+
.cm-menu [data-tone="violet"] { --cm-tone: var(--matrx-chip-violet-ink); }
|
|
102
|
+
.cm-menu [data-tone="fuchsia"] { --cm-tone: var(--matrx-chip-fuchsia-ink); }
|
|
103
|
+
.cm-menu [data-tone="rose"] { --cm-tone: var(--matrx-chip-rose-ink); }
|
|
104
|
+
.cm-menu [data-tone="orange"] { --cm-tone: var(--matrx-chip-orange-ink); }
|
|
105
|
+
.cm-menu [data-tone="amber"] { --cm-tone: var(--matrx-chip-amber-ink); }
|
|
106
|
+
.cm-menu [data-tone="lime"] { --cm-tone: var(--matrx-chip-lime-ink); }
|
|
107
|
+
.cm-menu [data-tone="emerald"] { --cm-tone: var(--matrx-chip-emerald-ink); }
|
|
108
|
+
.cm-menu [data-tone="teal"] { --cm-tone: var(--matrx-chip-teal-ink); }
|
|
109
|
+
.cm-menu [data-tone="cyan"] { --cm-tone: var(--matrx-chip-cyan-ink); }
|
|
110
|
+
.cm-menu [data-tone="slate"] { --cm-tone: var(--matrx-chip-slate-ink); }
|
|
111
|
+
.cm-menu [data-tone] .cm-icon-slot, .cm-menu .cm-tile[data-tone] { color: hsl(var(--cm-tone)); }
|
|
112
|
+
.cm-menu [data-tone][data-tone-label] { color: hsl(var(--cm-tone)); }
|
|
113
|
+
|
|
114
|
+
/* A setting flipped from the menu: the row is the control, the switch shows its state. */
|
|
115
|
+
.cm-switch { position: relative; flex: none; width: 26px; height: 16px; border-radius: 999px; background: hsl(var(--muted-foreground) / 0.35); transition: background-color 120ms ease; }
|
|
116
|
+
.cm-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 999px; background: hsl(var(--background)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: transform 120ms ease; }
|
|
117
|
+
.cm-switch[data-on] { background: hsl(var(--primary)); }
|
|
118
|
+
.cm-switch[data-on]::after { transform: translateX(10px); }
|
|
119
|
+
|
|
120
|
+
/* The feature section placeholder's header reads as a placeholder too. */
|
|
121
|
+
.cm-slot-label { font-style: italic; border-bottom: 1px dashed hsl(var(--border)); }
|
|
122
|
+
|
|
123
|
+
/* THE DESIGNED MENU's binding marks (Arman, pre-launch: visible to everyone). Hover gives the reason.
|
|
124
|
+
partial = yellow · unmatched = orange · needs a ruling / required but missing = red. A marked row
|
|
125
|
+
stays readable: the mark is a border and the label's ink, never a fill. */
|
|
126
|
+
.cm-menu [data-status] { box-shadow: inset 0 0 0 1px var(--cm-status); color: var(--cm-status); }
|
|
127
|
+
.cm-menu [data-status] .cm-icon-slot { color: var(--cm-status); }
|
|
128
|
+
.cm-menu [data-status][aria-disabled="true"] { opacity: 0.8; }
|
|
129
|
+
.cm-menu [data-status="partial"] { --cm-status: hsl(var(--warning-ink, 45 93% 40%)); }
|
|
130
|
+
.cm-menu [data-status="unmatched"] { --cm-status: rgb(234 88 12); }
|
|
131
|
+
.cm-menu [data-status="needs-arman"], .cm-menu [data-status="required-missing"] { --cm-status: hsl(var(--destructive)); }
|
|
132
|
+
|
|
133
|
+
/* The live menu: on screen at the pointer, scrolls when taller than the window. */
|
|
134
|
+
.cm-live { position: fixed; z-index: 2147483000; max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
|
|
135
|
+
.cm-live .cm-flyout { z-index: 2147483001; }
|
|
136
|
+
.cm-section[data-feature] > .cm-section-label { color: hsl(var(--foreground)); }
|
|
137
|
+
|
|
138
|
+
/* Inspect (Super Admin): a floating panel inside the package. */
|
|
139
|
+
.cm-inspect { position: fixed; z-index: 2147483002; top: 48px; right: 24px; width: min(760px, calc(100vw - 48px)); height: min(78vh, 860px);
|
|
140
|
+
display: flex; flex-direction: column; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--background));
|
|
141
|
+
color: hsl(var(--foreground)); box-shadow: 0 24px 60px -12px rgb(0 0 0 / 0.35); font-size: 13px; }
|
|
142
|
+
.cm-inspect-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid hsl(var(--border)); }
|
|
143
|
+
.cm-inspect-title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
144
|
+
.cm-inspect-tabs { padding: 6px 10px 0; }
|
|
145
|
+
.cm-inspect-body { flex: 1; min-height: 0; overflow: auto; padding: 10px; }
|
|
146
|
+
.cm-inspect-body pre { margin: 0; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ai-matrx/context-menu",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.13",
|
|
4
4
|
"description": "The AI Matrx context menu: the menu design model, the option catalog, the drag-and-drop menu builder, and (in progress) the live context menu engine moved out of matrx-frontend.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -109,22 +109,23 @@
|
|
|
109
109
|
"default": "./dist/menu-inspect.cjs"
|
|
110
110
|
}
|
|
111
111
|
},
|
|
112
|
+
"./styles.css": "./dist/styles.css",
|
|
112
113
|
"./package.json": "./package.json"
|
|
113
114
|
},
|
|
114
115
|
"dependencies": {
|
|
115
116
|
"@radix-ui/react-slot": "^1.3.3",
|
|
116
117
|
"lucide-react": "^1.47.0",
|
|
117
118
|
"@ai-matrx/alchemy": "latest",
|
|
118
|
-
"@ai-matrx/
|
|
119
|
+
"@ai-matrx/chat": "latest",
|
|
119
120
|
"@ai-matrx/design-system": "latest",
|
|
120
121
|
"@ai-matrx/icons": "latest",
|
|
121
122
|
"@ai-matrx/kit": "latest",
|
|
122
123
|
"@ai-matrx/media": "latest",
|
|
123
124
|
"@ai-matrx/records": "latest",
|
|
124
125
|
"@ai-matrx/records-ui": "latest",
|
|
125
|
-
"@ai-matrx/rich-editor": "latest",
|
|
126
126
|
"@ai-matrx/rich-content": "latest",
|
|
127
|
-
"@ai-matrx/
|
|
127
|
+
"@ai-matrx/rich-editor": "latest",
|
|
128
|
+
"@ai-matrx/content-ir": "latest"
|
|
128
129
|
},
|
|
129
130
|
"peerDependencies": {
|
|
130
131
|
"@reduxjs/toolkit": ">=2.0.0",
|
|
@@ -187,5 +188,5 @@
|
|
|
187
188
|
"builder:build": "vite build --config demo/vite.config.ts",
|
|
188
189
|
"builder:preview": "vite preview --config demo/vite.config.ts"
|
|
189
190
|
},
|
|
190
|
-
"gitHead": "
|
|
191
|
+
"gitHead": "1b3a4db0f46676d249733eb801a2f0511f4724ac"
|
|
191
192
|
}
|