@aginies/ui 0.1.0 → 0.2.0
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/index.cjs +1555 -1271
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +98 -6
- package/dist/index.d.ts +98 -6
- package/dist/index.js +1364 -1089
- package/dist/index.js.map +1 -1
- package/dist/styles.css +65 -12
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -1060,7 +1060,7 @@ button.agn-gantt__bar, button.agn-gantt__milestone { cursor: pointer; }
|
|
|
1060
1060
|
.agn-diff__split > .agn-diff__table + .agn-diff__table { border-left: 1px solid var(--line-2); }
|
|
1061
1061
|
|
|
1062
1062
|
/* --- 50-layout.css --- */
|
|
1063
|
-
/* layout: Card, Toolbar, ToolbarSeparator, PageLayout, Room */
|
|
1063
|
+
/* layout: Card, Toolbar, ToolbarSeparator, PageLayout, Grid, GridItem, Room */
|
|
1064
1064
|
|
|
1065
1065
|
/* ---- Card: flat, 1px line, radius-lg, no shadow ---- */
|
|
1066
1066
|
.agn-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); transition: border-color var(--duration-fast) var(--ease-enter); }
|
|
@@ -1103,17 +1103,56 @@ button.agn-card:disabled { cursor: default; opacity: .55; }
|
|
|
1103
1103
|
.agn-toolbar .agn-btn:not(.agn-btn--primary):not(.agn-btn--sm):not(.agn-btn--xs):not(.agn-btn--lg) { height: var(--control-h-sm); }
|
|
1104
1104
|
.agn-toolbar__sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 var(--space-1); flex-shrink: 0; }
|
|
1105
1105
|
|
|
1106
|
-
/* ---- PageLayout: the console frame ----
|
|
1107
|
-
|
|
1106
|
+
/* ---- PageLayout: the console frame ----
|
|
1107
|
+
It measures its own width and writes data-sidebar / data-panel / data-bp; the rules below read those, never the window.
|
|
1108
|
+
docked ≥ 1280 (bp-xl) · rail 1024–1279 (bp-lg) · overlay drawer and sheet < 1024 · gutter 16 below 768 (bp-md). */
|
|
1109
|
+
.agn-page { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg); color: var(--text); }
|
|
1110
|
+
.agn-page--narrow { --gutter-console: var(--space-4); }
|
|
1108
1111
|
.agn-page__header { flex-shrink: 0; z-index: var(--z-sticky); }
|
|
1109
|
-
.agn-
|
|
1112
|
+
.agn-page__bar { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; height: var(--header-h); padding: 0 var(--space-2); border-bottom: 1px solid var(--line); background: var(--panel); }
|
|
1113
|
+
.agn-page__bar-main { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--space-2); overflow: hidden; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
|
|
1114
|
+
.agn-page__body { position: relative; display: flex; flex: 1; min-height: 0; }
|
|
1110
1115
|
.agn-page__nav { flex-shrink: 0; height: 100%; }
|
|
1111
1116
|
.agn-page__main { flex: 1; min-width: 0; overflow: auto; }
|
|
1112
1117
|
.agn-page__content { max-width: var(--agn-page-max, var(--content-max)); margin: 0 auto; padding: var(--space-5) var(--gutter-console); }
|
|
1113
1118
|
.agn-page--flush .agn-page__content { padding: 0; max-width: none; height: 100%; min-height: 0; }
|
|
1114
1119
|
.agn-page__panel { flex: 0 0 var(--agn-page-panel-w, var(--panel-w)); width: var(--agn-page-panel-w, var(--panel-w)); border-left: 1px solid var(--line); background: var(--panel); overflow: auto; }
|
|
1115
|
-
|
|
1116
|
-
|
|
1120
|
+
.agn-page__panel > .agn-panel { width: 100%; height: 100%; border-left: 0; }
|
|
1121
|
+
/* drawer (sidebar < 1024) and sheet (side panel < 1024): absolute inside the page, so a page in a frame keeps them in the frame */
|
|
1122
|
+
.agn-page__nav--drawer, .agn-page__panel--sheet { position: absolute; top: 0; bottom: 0; z-index: var(--z-panel); visibility: hidden; box-shadow: var(--shadow-sm); outline: none; transition: transform var(--duration-slow) var(--ease-enter), visibility 0s linear var(--duration-slow); }
|
|
1123
|
+
.agn-page__nav--drawer { left: 0; max-width: calc(100% - var(--sidebar-w-collapsed)); transform: translateX(-100%); }
|
|
1124
|
+
.agn-page__nav--drawer > .agn-sidebar { max-width: 100%; }
|
|
1125
|
+
.agn-page__panel--sheet { right: 0; width: var(--agn-page-panel-w, var(--panel-w)); max-width: calc(100% - var(--space-7)); transform: translateX(100%); }
|
|
1126
|
+
.agn-page__nav--open, .agn-page__panel--open { visibility: visible; transform: none; transition: transform var(--duration-slow) var(--ease-enter), visibility 0s; }
|
|
1127
|
+
.agn-page__scrim { position: absolute; inset: 0; z-index: calc(var(--z-panel) - 1); background: var(--overlay); animation: agn-page-fade var(--duration-slow) var(--ease-enter); }
|
|
1128
|
+
@keyframes agn-page-fade { from { opacity: 0; } to { opacity: 1; } }
|
|
1129
|
+
|
|
1130
|
+
/* ---- Grid: 12 columns (grid-columns), grid-gap; container queries on its own width (px values = bp-sm … bp-2xl) ---- */
|
|
1131
|
+
.agn-grid { container: agn-grid / inline-size; display: grid; grid-template-columns: repeat(var(--agn-grid-cols, var(--grid-columns)), minmax(0, 1fr)); gap: var(--agn-grid-row-gap, var(--agn-grid-gap, var(--grid-gap))) var(--agn-grid-gap, var(--grid-gap)); min-width: 0; }
|
|
1132
|
+
.agn-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--agn-grid-min)), 1fr)); }
|
|
1133
|
+
.agn-grid--dense { grid-auto-flow: row dense; }
|
|
1134
|
+
.agn-grid--align-start { align-items: start; }
|
|
1135
|
+
.agn-grid--align-center { align-items: center; }
|
|
1136
|
+
.agn-grid--align-end { align-items: end; }
|
|
1137
|
+
.agn-grid__item { --agn-span: var(--agn-span-base, 12); grid-column: span var(--agn-span); min-width: 0; }
|
|
1138
|
+
.agn-grid--auto > .agn-grid__item { grid-column: auto; }
|
|
1139
|
+
@container agn-grid (min-width: 640px) { .agn-grid__item { --agn-span: var(--agn-span-sm, var(--agn-span-base, 12)); } }
|
|
1140
|
+
@container agn-grid (min-width: 768px) { .agn-grid__item { --agn-span: var(--agn-span-md, var(--agn-span-base, 12)); } }
|
|
1141
|
+
@container agn-grid (min-width: 1024px) { .agn-grid__item { --agn-span: var(--agn-span-lg, var(--agn-span-base, 12)); } }
|
|
1142
|
+
@container agn-grid (min-width: 1280px) { .agn-grid__item { --agn-span: var(--agn-span-xl, var(--agn-span-base, 12)); } }
|
|
1143
|
+
@container agn-grid (min-width: 1536px) { .agn-grid__item { --agn-span: var(--agn-span-2xl, var(--agn-span-base, 12)); } }
|
|
1144
|
+
|
|
1145
|
+
/* ---- Tables at narrow widths: className="agn-sticky-first" on a DataTable keeps the first column (and the selection column before it) in place while the rest scrolls ---- */
|
|
1146
|
+
.agn-sticky-first .agn-table__th:first-child, .agn-sticky-first .agn-table__td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
|
|
1147
|
+
.agn-sticky-first .agn-table__th:first-child { background: var(--panel-2); z-index: calc(var(--z-raised) + 1); }
|
|
1148
|
+
.agn-sticky-first .agn-table__th--check + .agn-table__th, .agn-sticky-first .agn-table__td--check + .agn-table__td { position: sticky; left: 32px; z-index: 1; background: var(--panel); box-shadow: inset -1px 0 0 var(--line); }
|
|
1149
|
+
.agn-sticky-first .agn-table__th--check + .agn-table__th { background: var(--panel-2); z-index: calc(var(--z-raised) + 1); }
|
|
1150
|
+
.agn-sticky-first .agn-table__th:first-child:not(.agn-table__th--check), .agn-sticky-first .agn-table__td:first-child:not(.agn-table__td--check) { box-shadow: inset -1px 0 0 var(--line); }
|
|
1151
|
+
.agn-sticky-first .agn-table__row:hover > .agn-table__td:first-child, .agn-sticky-first .agn-table__row:hover > .agn-table__td--check + .agn-table__td { background: var(--panel-2); }
|
|
1152
|
+
.agn-sticky-first .agn-table__row--selected > .agn-table__td:first-child, .agn-sticky-first .agn-table__row--selected > .agn-table__td--check + .agn-table__td, .agn-sticky-first .agn-table__row--active > .agn-table__td:first-child, .agn-sticky-first .agn-table__row--active > .agn-table__td--check + .agn-table__td { background: linear-gradient(var(--selection), var(--selection)), var(--panel); }
|
|
1153
|
+
.agn-sticky-first .agn-table__row--active > .agn-table__td:first-child:not(.agn-table__td--check) { box-shadow: inset 2px 0 0 var(--signal), inset -1px 0 0 var(--line); }
|
|
1154
|
+
|
|
1155
|
+
/* ---- KPI summary on a narrow page: wrapped items drop the dividing rule so no item starts indented ---- */
|
|
1117
1156
|
|
|
1118
1157
|
/* ---- Room: inverted-theme section ---- */
|
|
1119
1158
|
.agn-room { background: var(--bg); color: var(--text); }
|
|
@@ -1183,6 +1222,9 @@ button.agn-card:disabled { cursor: default; opacity: .55; }
|
|
|
1183
1222
|
.agn-sidebar__resize:hover::after, .agn-sidebar--resizing .agn-sidebar__resize::after { background: var(--signal); }
|
|
1184
1223
|
.agn-sidebar__resize:focus-visible { outline: none; }
|
|
1185
1224
|
.agn-sidebar__resize:focus-visible::after { background: var(--focus); width: var(--focus-width); }
|
|
1225
|
+
/* PageLayout states: rail 1024–1279 (an expanded rail pushes the page; the user chose it), drawer < 1024 (full sidebar width over the page, no resize handle) */
|
|
1226
|
+
.agn-sidebar--drawer { border-right: 0; transition: none; }
|
|
1227
|
+
.agn-sidebar--collapsed .agn-sidebar__bottom { align-items: center; overflow: hidden; }
|
|
1186
1228
|
.agn-launcher-trigger__chevron { color: var(--mute); flex-shrink: 0; }
|
|
1187
1229
|
.agn-launcher-trigger:has(.agn-launcher-trigger__meta) { height: auto; min-height: var(--nav-item-h); padding-block: var(--space-1); }
|
|
1188
1230
|
.agn-launcher-trigger .agn-nav-item__label { display: flex; flex-direction: column; min-width: 0; }
|
|
@@ -1333,7 +1375,13 @@ button.agn-pind__inner { cursor: pointer; }
|
|
|
1333
1375
|
.agn-split__toggle { position: absolute; left: var(--space-2); bottom: var(--space-2); display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--mute); cursor: pointer; z-index: 2; }
|
|
1334
1376
|
.agn-split__detail { flex: 1; min-width: 0; overflow: auto; }
|
|
1335
1377
|
.agn-split__empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 160px; color: var(--mute); font-size: 13px; }
|
|
1336
|
-
|
|
1378
|
+
/* measured on the SplitView itself: --narrow below 1024 (bp-lg) narrows the list; --stacked below stackBelow (default 768, bp-md) shows one pane at a time */
|
|
1379
|
+
.agn-split--narrow .agn-split__list { flex-basis: var(--agn-split-w, var(--panel-w)); width: var(--agn-split-w, var(--panel-w)); }
|
|
1380
|
+
.agn-split--stacked .agn-split__list { flex: 1 1 auto; width: auto; border-right: 0; }
|
|
1381
|
+
.agn-split--show-list .agn-split__detail, .agn-split--show-detail .agn-split__list { display: none; }
|
|
1382
|
+
.agn-split__back { position: sticky; top: 0; z-index: var(--z-raised); display: flex; align-items: center; height: 44px; padding: 0 var(--space-2); border-bottom: 1px solid var(--line); background: var(--panel); flex-shrink: 0; }
|
|
1383
|
+
.agn-split__back-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h-sm); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--link); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
|
|
1384
|
+
.agn-split__back-btn:hover { background: var(--panel-2); color: var(--link-hover); }
|
|
1337
1385
|
|
|
1338
1386
|
/* ---- AppLauncher ---- */
|
|
1339
1387
|
.agn-launcher { width: 360px; max-width: 100%; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-sm); }
|
|
@@ -1751,7 +1799,8 @@ button.agn-welcome__step:hover { background: var(--panel-2); }
|
|
|
1751
1799
|
/* SidePanel */
|
|
1752
1800
|
.agn-panel { display: flex; flex-direction: column; width: var(--panel-w); max-width: 100%; background: var(--panel); color: var(--text); border-left: 1px solid var(--line); }
|
|
1753
1801
|
.agn-panel--lg { width: var(--panel-w-lg); }
|
|
1754
|
-
.agn-panel--overlay { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-panel); box-shadow: var(--shadow-sm); animation: agn-panel-in var(--duration-slow) var(--ease-enter); }
|
|
1802
|
+
.agn-panel--overlay { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-panel); max-width: calc(100% - var(--space-7)); box-shadow: var(--shadow-sm); outline: none; animation: agn-panel-in var(--duration-slow) var(--ease-enter); }
|
|
1803
|
+
.agn-panel-scrim { position: fixed; inset: 0; z-index: calc(var(--z-panel) - 1); background: var(--overlay); animation: agn-panel-fade var(--duration-slow) var(--ease-enter); }
|
|
1755
1804
|
.agn-panel--docked { position: relative; height: 100%; }
|
|
1756
1805
|
.agn-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); min-height: var(--header-h); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
|
|
1757
1806
|
.agn-panel__heading { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
|
@@ -1762,6 +1811,7 @@ button.agn-welcome__step:hover { background: var(--panel-2); }
|
|
|
1762
1811
|
.agn-panel__body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-4); font-size: 13px; }
|
|
1763
1812
|
.agn-panel__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--panel); }
|
|
1764
1813
|
@keyframes agn-panel-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
|
|
1814
|
+
@keyframes agn-panel-fade { from { opacity: 0; } to { opacity: 1; } }
|
|
1765
1815
|
/* DockedComposer */
|
|
1766
1816
|
.agn-composer { position: fixed; bottom: 0; z-index: var(--z-panel); display: flex; flex-direction: column; width: 480px; max-width: calc(100vw - 2 * var(--space-4)); max-height: 70vh; background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow); }
|
|
1767
1817
|
.agn-composer--right { right: var(--space-5); }
|
|
@@ -2273,8 +2323,9 @@ button.agn-block { cursor: pointer; }
|
|
|
2273
2323
|
.agn-kpi .agn-stat__chart { margin-top: var(--space-1); }
|
|
2274
2324
|
/* KpiRow — the page summary: no boxes, hairlines between */
|
|
2275
2325
|
.agn-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); row-gap: var(--space-5); padding: var(--space-2) 0; }
|
|
2276
|
-
.agn-kpi-row
|
|
2277
|
-
|
|
2326
|
+
.agn-kpi-row { margin-left: calc(-1 * var(--space-5)); overflow-x: clip; }
|
|
2327
|
+
/* Each item's divider sits 1px outside its column; the row reaches into its left padding and clips sideways, so whichever item starts a line, however the grid wraps, loses its divider. */
|
|
2328
|
+
.agn-kpi-row > .agn-kpi--plain { border-left: 1px solid var(--line); margin-left: -1px; }
|
|
2278
2329
|
|
|
2279
2330
|
/* ChartCard — unit after the title, headline over the plot, the plot measured so the SVG is never stretched */
|
|
2280
2331
|
.agn-chart-card__unit { margin-left: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--mute); }
|
|
@@ -2398,9 +2449,10 @@ a.agn-insight__source:hover { color: var(--link-hover); text-decoration: underli
|
|
|
2398
2449
|
.agn-flow__spin { animation: agn-spin 1s linear infinite; }
|
|
2399
2450
|
.agn-flow__version { margin-left: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--mute); }
|
|
2400
2451
|
|
|
2401
|
-
/* LeaderboardWidget — rank · who · bar + value · change */
|
|
2452
|
+
/* LeaderboardWidget — rank · who · bar + value · change; below 400px the bar gives way and the value stays */
|
|
2402
2453
|
.agn-leader .agn-card__body { padding-top: var(--space-2); }
|
|
2403
|
-
.agn-
|
|
2454
|
+
.agn-leader { container-type: inline-size; }
|
|
2455
|
+
.agn-leader__head, .agn-leader__row { display: grid; grid-template-columns: 24px minmax(0, 1.5fr) minmax(0, 1fr) 64px; align-items: center; gap: var(--space-3); }
|
|
2404
2456
|
.agn-leader__head { padding: var(--space-1) 0 var(--space-2); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
2405
2457
|
.agn-leader__head > span:last-child { text-align: right; }
|
|
2406
2458
|
.agn-leader__list { list-style: none; margin: 0; padding: 0; }
|
|
@@ -2460,3 +2512,4 @@ a.agn-insight__source:hover { color: var(--link-hover); text-decoration: underli
|
|
|
2460
2512
|
.agn-comments__list > .agn-empty { padding: var(--space-4) 0; }
|
|
2461
2513
|
.agn-comments__composer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--bg-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
|
|
2462
2514
|
.agn-comments__mention { color: var(--link); font-weight: 500; }
|
|
2515
|
+
@container (max-width: 400px) { .agn-leader__head, .agn-leader__row { grid-template-columns: 20px minmax(0, 1fr) auto 56px; gap: var(--space-2); } .agn-leader__bar { display: none; } }
|