@panneau/app 5.0.0-alpha.4 → 5.0.0-alpha.6

package/dist/shell/Sidebar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.module.js","names":[],"sources":["../../src/shell/Sidebar.module.css"],"sourcesContent":["/* The sidebar sits on the window's background, like the tab strip of a browser: no surface of its\n * own, and the current link raised on a surface. Collapsed, it is a rail of icons. */\n\n.sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-4);\n    min-width: 0;\n    height: 100%;\n    padding: var(--panneau-space-3) var(--panneau-space-2);\n}\n\n.top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n}\n\n.brand {\n    display: flex;\n    flex: 1 1 auto;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n    min-height: var(--panneau-control-height-sm);\n    padding-inline: var(--panneau-space-1);\n    border-radius: var(--panneau-radius-md);\n    color: var(--panneau-color-text);\n    font-weight: var(--panneau-font-weight-bold);\n    text-decoration: none;\n    outline: none;\n}\n\n.logo {\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n    width: 1.75rem;\n    height: 1.75rem;\n    border-radius: var(--panneau-radius-md);\n    background: var(--panneau-sidebar-logo-bg, var(--panneau-color-accent));\n    color: var(--panneau-sidebar-logo-color, var(--panneau-color-accent-text));\n    font-size: var(--panneau-font-size-sm);\n    line-height: 1;\n}\n\n.toggle {\n    flex: none;\n    color: var(--panneau-color-text-muted);\n}\n\n/* \"Go to…\": a button that looks like a search field, with its shortcut. */\n.goTo {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height-sm);\n    padding: 0 var(--panneau-space-2);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-sidebar-link-radius, var(--panneau-radius-md));\n    background: var(--panneau-color-surface);\n    color: var(--panneau-color-text-muted);\n    font: inherit;\n    font-size: var(--panneau-font-size-sm);\n    text-align: start;\n    cursor: pointer;\n    outline: none;\n}\n\n.goTo[data-hovered] {\n    border-color: var(--panneau-color-border-control);\n    color: var(--panneau-color-text);\n}\n\n.goTo[data-focus-visible] {\n    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);\n}\n\n.goToSearch {\n    flex: none;\n}\n\n.goToLabel {\n    flex: 1 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.goToKey {\n    flex: none;\n    padding: 0 var(--panneau-space-1);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-sm);\n    font-family: inherit;\n    font-size: var(--panneau-font-size-xs);\n}\n\n.goToIcon {\n    flex: none;\n    color: var(--panneau-color-text-muted);\n}\n\n.nav {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--panneau-space-3);\n    min-height: 0;\n    overflow-y: auto;\n    /* Room for the focus ring of the links. */\n    margin-inline: calc(-1 * var(--panneau-focus-width));\n    padding-inline: var(--panneau-focus-width);\n}\n\n.section {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.sectionLabel {\n    padding: var(--panneau-space-1) var(--panneau-space-2) 0;\n    color: var(--panneau-color-text-muted);\n    font-size: var(--panneau-font-size-xs);\n    font-weight: var(--panneau-font-weight-medium);\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.separator {\n    width: 100%;\n    margin: 0;\n    border: 0;\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.link {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height-sm);\n    padding: 0 var(--panneau-space-2);\n    border: var(--panneau-border-width) solid transparent;\n    border-radius: var(--panneau-sidebar-link-radius, var(--panneau-radius-md));\n    color: var(--panneau-sidebar-link-color, var(--panneau-color-text-muted));\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n    text-decoration: none;\n    outline: none;\n    cursor: pointer;\n    transition:\n        background-color var(--panneau-duration),\n        color var(--panneau-duration);\n}\n\n.link[data-hovered] {\n    background: var(--panneau-sidebar-link-hover-bg, var(--panneau-color-hover));\n    color: var(--panneau-sidebar-link-current-color, var(--panneau-color-text));\n}\n\n.link[data-pressed] {\n    background: var(--panneau-color-pressed);\n}\n\n.link[aria-current='page'] {\n    border-color: var(--panneau-sidebar-link-current-border, var(--panneau-color-border));\n    background: var(--panneau-sidebar-link-current-bg, var(--panneau-color-surface));\n    color: var(--panneau-sidebar-link-current-color, var(--panneau-color-text));\n    box-shadow: var(--panneau-sidebar-link-current-shadow, var(--panneau-shadow-sm));\n}\n\n.link[data-focus-visible],\n.brand[data-focus-visible] {\n    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);\n}\n\n.linkIcon {\n    flex: none;\n}\n\n.label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    padding-top: var(--panneau-space-3);\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.user {\n    display: flex;\n    flex: 1 1 auto;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n    padding-inline: var(--panneau-space-1);\n}\n\n.userLink {\n    min-height: var(--panneau-control-height-sm);\n    padding-block: var(--panneau-space-1);\n    border: var(--panneau-border-width) solid transparent;\n    border-radius: var(--panneau-radius-md);\n    color: var(--panneau-color-text);\n    text-decoration: none;\n    outline: none;\n    cursor: pointer;\n}\n\n/* The profile is a link of the sidebar: the same hover and current states. */\n.userLink[data-hovered] {\n    background: var(--panneau-sidebar-link-hover-bg, var(--panneau-color-hover));\n}\n\n.userLink[aria-current='page'] {\n    border-color: var(--panneau-sidebar-link-current-border, var(--panneau-color-border));\n    background: var(--panneau-sidebar-link-current-bg, var(--panneau-color-surface));\n    box-shadow: var(--panneau-sidebar-link-current-shadow, var(--panneau-shadow-sm));\n}\n\n.userLink[data-focus-visible] {\n    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);\n}\n\n.avatar {\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n    width: 1.75rem;\n    height: 1.75rem;\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-full);\n    background: var(--panneau-color-surface);\n    color: var(--panneau-color-text);\n    font-size: var(--panneau-font-size-xs);\n    font-weight: var(--panneau-font-weight-bold);\n    object-fit: cover;\n}\n\n.userText {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    line-height: var(--panneau-line-height-tight);\n}\n\n.userName {\n    overflow: hidden;\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n    text-overflow: ellipsis;\n}\n\n.userEmail {\n    overflow: hidden;\n    color: var(--panneau-color-text-muted);\n    font-size: var(--panneau-font-size-xs);\n    text-overflow: ellipsis;\n}\n\n/* The rail: icons only, centered, the labels in tooltips. */\n.collapsed {\n    align-items: center;\n    padding-inline: var(--panneau-space-1);\n}\n\n.collapsed .top,\n.collapsed .footer {\n    flex-direction: column;\n}\n\n.collapsed .brand {\n    flex: none;\n    padding: 0;\n}\n\n.collapsed .label,\n.collapsed .sectionLabel {\n    display: none;\n}\n\n.collapsed .link {\n    justify-content: center;\n    width: var(--panneau-control-height-sm);\n    padding: 0;\n}\n\n.collapsed .list {\n    align-items: center;\n}\n\n.collapsed .user {\n    flex: none;\n    padding: 0;\n}\n"],"mappings":""}

package/dist/shell/tokens.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Tokens of the frame of the app: the window's background and the panel of the page. The default
+ * insets the page on a raised panel, as in recent browsers; a flat frame sets `inset` and
+ * `panel-radius` to `0`.
+ */
+export declare const shellTokens: import("@panneau/ui").ComponentTokens<"shell", "panneau-shell-bg" | "panneau-shell-inset" | "panneau-shell-panel-bg" | "panneau-shell-panel-border" | "panneau-shell-panel-radius" | "panneau-shell-panel-shadow" | "panneau-shell-panel-padding-x">;
+/** Tokens of the sidebar: its column, its links and the logo of the site. */
+export declare const sidebarTokens: import("@panneau/ui").ComponentTokens<"sidebar", "panneau-sidebar-border" | "panneau-sidebar-width" | "panneau-sidebar-bg" | "panneau-sidebar-width-collapsed" | "panneau-sidebar-link-color" | "panneau-sidebar-link-hover-bg" | "panneau-sidebar-link-radius" | "panneau-sidebar-link-current-color" | "panneau-sidebar-link-current-bg" | "panneau-sidebar-link-current-border" | "panneau-sidebar-link-current-shadow" | "panneau-sidebar-logo-bg" | "panneau-sidebar-logo-color">;
+/** Tokens of the panel of an item's details, next to its list. */
+export declare const itemPanelTokens: import("@panneau/ui").ComponentTokens<"item-panel", "panneau-item-panel-width" | "panneau-item-panel-radius" | "panneau-item-panel-bg" | "panneau-item-panel-width-wide" | "panneau-item-panel-shadow">;
+/** The component tokens of `@panneau/app`, by component (decision 0024). */
+export declare const appComponentTokens: Readonly<{
+    shell: Readonly<Record<"panneau-shell-bg" | "panneau-shell-inset" | "panneau-shell-panel-bg" | "panneau-shell-panel-border" | "panneau-shell-panel-radius" | "panneau-shell-panel-shadow" | "panneau-shell-panel-padding-x", string>>;
+    sidebar: Readonly<Record<"panneau-sidebar-border" | "panneau-sidebar-width" | "panneau-sidebar-bg" | "panneau-sidebar-width-collapsed" | "panneau-sidebar-link-color" | "panneau-sidebar-link-hover-bg" | "panneau-sidebar-link-radius" | "panneau-sidebar-link-current-color" | "panneau-sidebar-link-current-bg" | "panneau-sidebar-link-current-border" | "panneau-sidebar-link-current-shadow" | "panneau-sidebar-logo-bg" | "panneau-sidebar-logo-color", string>>;
+    'item-panel': Readonly<Record<"panneau-item-panel-width" | "panneau-item-panel-radius" | "panneau-item-panel-bg" | "panneau-item-panel-width-wide" | "panneau-item-panel-shadow", string>>;
+}>;
+type AppTokenName = keyof typeof shellTokens.tokens | keyof typeof sidebarTokens.tokens | keyof typeof itemPanelTokens.tokens;
+declare module '@panneau/ui' {
+    interface PanneauTokens extends Record<AppTokenName, true> {
+    }
+}
+export {};
+//# sourceMappingURL=tokens.d.ts.map

package/dist/shell/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/shell/tokens.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,WAAW,sPAetB,CAAC;AAEH,6EAA6E;AAC7E,eAAO,MAAM,aAAa,wdA2BxB,CAAC;AAEH,kEAAkE;AAClE,eAAO,MAAM,eAAe,yMAW1B,CAAC;AAEH,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB;;;;EAI7B,CAAC;AAEH,KAAK,YAAY,GACX,MAAM,OAAO,WAAW,CAAC,MAAM,GAC/B,MAAM,OAAO,aAAa,CAAC,MAAM,GACjC,MAAM,OAAO,eAAe,CAAC,MAAM,CAAC;AAE1C,OAAO,QAAQ,aAAa,CAAC;IAGzB,UAAU,aAAc,SAAQ,MAAM,CAAC,YAAY,EAAE,IAAI,CAAC;KAAG;CAChE"}

package/dist/shell/tokens.js

@@ -0,0 +1,75 @@
+import { defineComponentTokens } from "@panneau/ui";
+//#region src/shell/tokens.ts
+/**
+* Tokens of the frame of the app: the window's background and the panel of the page. The default
+* insets the page on a raised panel, as in recent browsers; a flat frame sets `inset` and
+* `panel-radius` to `0`.
+*/
+var shellTokens = defineComponentTokens("shell", {
+	/** Background of the window, behind the sidebar and the panel. */
+	bg: "var(--panneau-color-surface-sunken)",
+	/** Space between the panel and the edges of the window. */
+	inset: "var(--panneau-space-2)",
+	/** Background of the panel of the page. */
+	"panel-bg": "var(--panneau-color-surface)",
+	/** Border of the panel. */
+	"panel-border": "var(--panneau-border-width) solid var(--panneau-color-border)",
+	/** Corner radius of the panel. */
+	"panel-radius": "calc(var(--panneau-radius-lg) * 1.5)",
+	/** Shadow of the panel. */
+	"panel-shadow": "var(--panneau-shadow-sm)",
+	/** Horizontal padding of the page, from the `lg` width. */
+	"panel-padding-x": "var(--panneau-space-8)"
+});
+/** Tokens of the sidebar: its column, its links and the logo of the site. */
+var sidebarTokens = defineComponentTokens("sidebar", {
+	/** Width, expanded. */
+	width: "15rem",
+	/** Width, collapsed to a rail of icons. */
+	"width-collapsed": "3.5rem",
+	/** Background. Transparent on the window's background by default. */
+	bg: "transparent",
+	/** Border on the side of the page. */
+	border: "0 none",
+	/** Text and icons of the links. */
+	"link-color": "var(--panneau-color-text-muted)",
+	/** Background of a hovered link. */
+	"link-hover-bg": "var(--panneau-color-hover)",
+	/** Corner radius of the links. */
+	"link-radius": "var(--panneau-radius-md)",
+	/** Text and icon of the current link. */
+	"link-current-color": "var(--panneau-color-text)",
+	/** Background of the current link. */
+	"link-current-bg": "var(--panneau-color-surface)",
+	/** Border color of the current link. */
+	"link-current-border": "var(--panneau-color-border)",
+	/** Shadow of the current link. */
+	"link-current-shadow": "var(--panneau-shadow-sm)",
+	/** Background of the logo, the first letter of the site. */
+	"logo-bg": "var(--panneau-color-accent)",
+	/** Letter of the logo. */
+	"logo-color": "var(--panneau-color-accent-text)"
+});
+/** Tokens of the panel of an item's details, next to its list. */
+var itemPanelTokens = defineComponentTokens("item-panel", {
+	/** Width, beside the list or over it. */
+	width: "24rem",
+	/** Width once widened, for previews: a share of the page, or a length. */
+	"width-wide": "50%",
+	/** Background. */
+	bg: "var(--panneau-color-surface)",
+	/** Corner radius, beside the list. */
+	radius: "var(--panneau-radius-lg)",
+	/** Shadow, beside the list. */
+	shadow: "var(--panneau-shadow-md)"
+});
+/** The component tokens of `@panneau/app`, by component (decision 0024). */
+var appComponentTokens = Object.freeze({
+	shell: shellTokens.tokens,
+	sidebar: sidebarTokens.tokens,
+	"item-panel": itemPanelTokens.tokens
+});
+//#endregion
+export { appComponentTokens, itemPanelTokens, shellTokens, sidebarTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/shell/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/shell/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '@panneau/ui';\n\n/**\n * Tokens of the frame of the app: the window's background and the panel of the page. The default\n * insets the page on a raised panel, as in recent browsers; a flat frame sets `inset` and\n * `panel-radius` to `0`.\n */\nexport const shellTokens = defineComponentTokens('shell', {\n    /** Background of the window, behind the sidebar and the panel. */\n    bg: 'var(--panneau-color-surface-sunken)',\n    /** Space between the panel and the edges of the window. */\n    inset: 'var(--panneau-space-2)',\n    /** Background of the panel of the page. */\n    'panel-bg': 'var(--panneau-color-surface)',\n    /** Border of the panel. */\n    'panel-border': 'var(--panneau-border-width) solid var(--panneau-color-border)',\n    /** Corner radius of the panel. */\n    'panel-radius': 'calc(var(--panneau-radius-lg) * 1.5)',\n    /** Shadow of the panel. */\n    'panel-shadow': 'var(--panneau-shadow-sm)',\n    /** Horizontal padding of the page, from the `lg` width. */\n    'panel-padding-x': 'var(--panneau-space-8)',\n});\n\n/** Tokens of the sidebar: its column, its links and the logo of the site. */\nexport const sidebarTokens = defineComponentTokens('sidebar', {\n    /** Width, expanded. */\n    width: '15rem',\n    /** Width, collapsed to a rail of icons. */\n    'width-collapsed': '3.5rem',\n    /** Background. Transparent on the window's background by default. */\n    bg: 'transparent',\n    /** Border on the side of the page. */\n    border: '0 none',\n    /** Text and icons of the links. */\n    'link-color': 'var(--panneau-color-text-muted)',\n    /** Background of a hovered link. */\n    'link-hover-bg': 'var(--panneau-color-hover)',\n    /** Corner radius of the links. */\n    'link-radius': 'var(--panneau-radius-md)',\n    /** Text and icon of the current link. */\n    'link-current-color': 'var(--panneau-color-text)',\n    /** Background of the current link. */\n    'link-current-bg': 'var(--panneau-color-surface)',\n    /** Border color of the current link. */\n    'link-current-border': 'var(--panneau-color-border)',\n    /** Shadow of the current link. */\n    'link-current-shadow': 'var(--panneau-shadow-sm)',\n    /** Background of the logo, the first letter of the site. */\n    'logo-bg': 'var(--panneau-color-accent)',\n    /** Letter of the logo. */\n    'logo-color': 'var(--panneau-color-accent-text)',\n});\n\n/** Tokens of the panel of an item's details, next to its list. */\nexport const itemPanelTokens = defineComponentTokens('item-panel', {\n    /** Width, beside the list or over it. */\n    width: '24rem',\n    /** Width once widened, for previews: a share of the page, or a length. */\n    'width-wide': '50%',\n    /** Background. */\n    bg: 'var(--panneau-color-surface)',\n    /** Corner radius, beside the list. */\n    radius: 'var(--panneau-radius-lg)',\n    /** Shadow, beside the list. */\n    shadow: 'var(--panneau-shadow-md)',\n});\n\n/** The component tokens of `@panneau/app`, by component (decision 0024). */\nexport const appComponentTokens = Object.freeze({\n    shell: shellTokens.tokens,\n    sidebar: sidebarTokens.tokens,\n    'item-panel': itemPanelTokens.tokens,\n});\n\ntype AppTokenName =\n    | keyof typeof shellTokens.tokens\n    | keyof typeof sidebarTokens.tokens\n    | keyof typeof itemPanelTokens.tokens;\n\ndeclare module '@panneau/ui' {\n    // Lets `defineTheme()` take the tokens of the app.\n    // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- the members are inherited\n    interface PanneauTokens extends Record<AppTokenName, true> {}\n}\n"],"mappings":";;;;;;;AAOA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,IAAI;;CAEJ,OAAO;;CAEP,YAAY;;CAEZ,gBAAgB;;CAEhB,gBAAgB;;CAEhB,gBAAgB;;CAEhB,mBAAmB;AACvB,CAAC;;AAGD,IAAa,gBAAgB,sBAAsB,WAAW;;CAE1D,OAAO;;CAEP,mBAAmB;;CAEnB,IAAI;;CAEJ,QAAQ;;CAER,cAAc;;CAEd,iBAAiB;;CAEjB,eAAe;;CAEf,sBAAsB;;CAEtB,mBAAmB;;CAEnB,uBAAuB;;CAEvB,uBAAuB;;CAEvB,WAAW;;CAEX,cAAc;AAClB,CAAC;;AAGD,IAAa,kBAAkB,sBAAsB,cAAc;;CAE/D,OAAO;;CAEP,cAAc;;CAEd,IAAI;;CAEJ,QAAQ;;CAER,QAAQ;AACZ,CAAC;;AAGD,IAAa,qBAAqB,OAAO,OAAO;CAC5C,OAAO,YAAY;CACnB,SAAS,cAAc;CACvB,cAAc,gBAAgB;AAClC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@panneau/app",
-    "version": "5.0.0-alpha.4",
-    "description": "The Panneau admin panel: the app entry (createPanneauApp), and the shell, routes and pages to come.",
+    "version": "5.0.0-alpha.6",
+    "description": "The Panneau admin panel: the app entry (createPanneauApp), the shell with its sidebar, and the pages of resources.",
     "type": "module",
     "license": "MIT",
     "repository": {
@@ -34,11 +34,20 @@
     "peerDependencies": {
         "@tanstack/react-query": "^5.0.0",
         "react": "^19.2.0",
-        "react-dom": "^19.2.0"
+        "react-aria-components": "^1.22.0",
+        "react-dom": "^19.2.0",
+        "react-intl": "^12.0.0"
     },
     "dependencies": {
-        "@panneau/core": "5.0.0-alpha.4",
-        "@panneau/data": "5.0.0-alpha.4",
-        "@panneau/protocol": "5.0.0-alpha.4"
+        "@panneau/actions": "5.0.0-alpha.6",
+        "@panneau/core": "5.0.0-alpha.6",
+        "@panneau/data": "5.0.0-alpha.6",
+        "@panneau/fields": "5.0.0-alpha.6",
+        "@panneau/forms": "5.0.0-alpha.6",
+        "@panneau/intl": "5.0.0-alpha.6",
+        "@panneau/lists": "5.0.0-alpha.6",
+        "@panneau/protocol": "5.0.0-alpha.6",
+        "@panneau/ui": "5.0.0-alpha.6",
+        "lucide-react": "^1.57.0"
     }
 }