@nadicodeai/design-system 12.1.162 → 12.1.164

package/DESIGN.md

@@ -786,7 +786,7 @@ A product page is one of five page compositions, each answering one question fir
 | --- | --- | --- | --- |
 | Overview | `OverviewPage` | What needs attention? | The period, the figures, the chart cards, then the exceptions that need a person. Never a stack of previews of every section. |
 | Collection | `CollectionPage` | Which record? | The title and the page's actions, the sibling collections as line tabs, one toolbar, then one line per record ("Tables and missing values"); one row is one hover and one open target. Actionable attention stands above the toolbar when present; business summaries belong to Dashboard and Analytics. A `rail` carries context intrinsic to the collection, such as the selected Library hub. The Portal's Agents are its exception, a `DataTable` of entity rows, as Vercel's Deployments list. |
-| Object | `ObjectPage` | What is this, what can I do? | The parent in the path and its product’s section navigation, then the object card, then its sections, each a card only where it owns a decision. An Agent's first section, Profile, opens with her `AgentProfileCard`, the same in every product. |
+| Object | `ObjectPage` | What is this, what can I do? | The parent in the path and its product’s section navigation, then the object card, then its sections, each a card only where it owns a decision. In the Portal an Agent is an `ObjectPage` whose first tab, Agent, holds her settings as rows; in Nadia's window her Edit page opens on Profile with her `AgentProfileCard`. |
 | Settings | `SettingsPage` | What can I change? | Section cards, each saving its own fields; the danger zone closes the page. |
 | Library | `LibraryShelf` for Agent templates; `CollectionPage` for Skills and Plugins | What reusable thing can I use? | Agent templates as Vercel's Templates gallery; Skills and Plugins as an entity collection, with staff's hub as its rail. |
 
@@ -1208,7 +1208,7 @@ The company is **nadicode**, lowercase. Its logo is the n, and the name drawn in
 
 1. **Mark.** The n, the logo itself, as tall as it is wide, with nothing added. It stands for the company wherever the company is recognised by its sign: app headers and compact navigation, the corner of a slide, a sticker, a stamp.
 2. **Wordmark.** nadicode in one geometric line with one dot over the i. The dot is the only colour in the logo, where an Agent sits. Use it wherever the company is named: the website's header, documents, proposals, invoices, email signatures, a first slide.
-3. **Icon.** The mark on a tile with rounded corners, in one of three fields. The brand tile, the white n on `{colors.identity-cobalto}`, is for favicons, avatars and the website's app icon, and is the one place the brand colour fills a logo's field. The light tile, the `{colors.ink}` n on white, is a desktop app's icon, which keeps it in the system's dark appearance. The dark tile, the white n on `{colors.identity-ink}`, is the icon wherever else it sits on a dark ground: a dark slide, a dark profile, an app's own dark screen.
+3. **Icon.** The mark on a tile with rounded corners, in one of three fields. The brand tile, the white n on `{colors.identity-cobalto}`, is for favicons, avatars and the website's app icon, and is the one place the brand colour fills a logo's field. Where the platform crops the picture itself, a profile picture cut to a circle or a square and a phone's home screen, the tile has square corners and the platform draws its shape: the avatar is the brand tile, or the light or dark tile where a profile wants white or black, with the n across 46% of the side, so a circle cut keeps it whole with its clear space. The mark is never a profile picture: it has no field, and its n runs to the edges a crop cuts. The light tile, the `{colors.ink}` n on white, is a desktop app's icon, which keeps it in the system's dark appearance. The dark tile, the white n on `{colors.identity-ink}`, is the icon wherever else it sits on a dark ground: a dark slide, an app's own dark screen.
 4. **Signature form.** The light tile with its construction guides in `{colors.logo-guide}`: a dotted circle around the arch whose radius is the golden section of the n's width, the two centre axes, and the n's width and height, each measured 1.000. It is drawn from 128 px up, on light grounds: Nadia's desktop icon, a cover or closing slide, a poster, print; on a dark ground the dark tile stands in for it. Below 128 px a guide is a fraction of a pixel, so the icon drops them; drawn on a screen as a logo, such as at the top of an entry scene, it drops them at any size. Alveare draws its own mark's desktop icon the same way.
 
 The mark and the wordmark never stand side by side: the wordmark already begins with the n, so together they read "n nadicode". Each place takes one of them.

package/README.md

@@ -26,8 +26,8 @@ Individual font files are also exposed under `@nadicodeai/design-system/assets/f
 
 [Brand media authority](DESIGN.md#brand-media-authority) says what each form
 is and where it goes, and [`examples/logo.html`](./examples/logo.html) shows
-them all. This table is the file behind each, with transparent PNG fallbacks
-for software that cannot place SVG.
+them all. This table is the file behind each, with PNG fallbacks for software
+that cannot place SVG.
 
 | Form | On white or a soft neutral | On black or another dark ground |
 | --- | --- | --- |
@@ -37,14 +37,18 @@ for software that cannot place SVG.
 | Icon, brand tile | `assets/app-icon` | `assets/app-icon` |
 | Icon, light and dark tiles | `assets/app-icon-light` | `assets/app-icon-dark` |
 | Signature form, from 128 px | `assets/app-icon-signature` | `assets/app-icon-dark` |
+| Avatar, brand tile | `assets/avatar` | `assets/avatar` |
+| Avatar, light and dark tiles | `assets/avatar-light` | `assets/avatar-dark` |
 
 The one-ink files exist for embossing, stamps and one-colour print, where a
 second colour cannot be laid down. The brand tile carries its own field, so
-one file serves both grounds.
+one file serves both grounds. The avatars are the three tiles with square
+corners, for any place that crops the picture to a circle or a square, and
+their PNGs are opaque.
 
 Prefix each route with `@nadicodeai/design-system/`. Append `.png` for the
-transparent PNG fallback, for example
-`@nadicodeai/design-system/assets/wordmark-white.png`.
+PNG fallback, for example `@nadicodeai/design-system/assets/wordmark-white.png`.
+Every PNG but the avatars is transparent outside its drawing.
 
 ```ts
 import wordmarkUrl from "@nadicodeai/design-system/assets/wordmark";

package/dist/assets/avatar-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024" role="img" aria-label="nadicode"><rect width="1024" height="1024" rx="0" fill="#000000"/><path d="M9 150V100A41 41 0 0 1 91 100V150" transform="translate(276.48 40.96) scale(4.71)" fill="none" stroke="#ffffff" stroke-width="18"/></svg>

package/dist/assets/avatar-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024" role="img" aria-label="nadicode"><rect width="1024" height="1024" rx="0" fill="#ffffff"/><path d="M9 150V100A41 41 0 0 1 91 100V150" transform="translate(276.48 40.96) scale(4.71)" fill="none" stroke="#111111" stroke-width="18"/></svg>

package/dist/assets/avatar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024" role="img" aria-label="nadicode"><rect width="1024" height="1024" rx="0" fill="#1e3cff"/><path d="M9 150V100A41 41 0 0 1 91 100V150" transform="translate(276.48 40.96) scale(4.71)" fill="none" stroke="#ffffff" stroke-width="18"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "12.1.162",
+  "version": "12.1.164",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -97,6 +97,30 @@
       "types": "./src/assets/logo-asset.d.ts",
       "default": "./dist/assets/app-icon-signature.png"
     },
+    "./assets/avatar": {
+      "types": "./src/assets/logo-asset.d.ts",
+      "default": "./dist/assets/avatar.svg"
+    },
+    "./assets/avatar.png": {
+      "types": "./src/assets/logo-asset.d.ts",
+      "default": "./dist/assets/avatar.png"
+    },
+    "./assets/avatar-light": {
+      "types": "./src/assets/logo-asset.d.ts",
+      "default": "./dist/assets/avatar-light.svg"
+    },
+    "./assets/avatar-light.png": {
+      "types": "./src/assets/logo-asset.d.ts",
+      "default": "./dist/assets/avatar-light.png"
+    },
+    "./assets/avatar-dark": {
+      "types": "./src/assets/logo-asset.d.ts",
+      "default": "./dist/assets/avatar-dark.svg"
+    },
+    "./assets/avatar-dark.png": {
+      "types": "./src/assets/logo-asset.d.ts",
+      "default": "./dist/assets/avatar-dark.png"
+    },
     "./assets/empty/agents": {
       "types": "./src/assets/logo-asset.d.ts",
       "default": "./src/assets/empty/agents.webp"

package/src/assets/logo-geometry.d.ts

@@ -25,6 +25,7 @@ export declare const logoWordmarkGeometry: LogoGeometry;
 export declare const APP_ICON_MARK_RATIO: number;
 export declare const FAVICON_MARK_RATIO: number;
 export declare function logoIconGeometry(size: number, markRatio: number): LogoGeometry;
+export declare function logoSquareIconGeometry(size: number): LogoGeometry;
 export declare function logoSignatureGeometry(size: number): LogoGeometry;
 export declare function resolveLogoGeometry(
   geometry: LogoGeometry,

package/src/assets/logo-geometry.js

@@ -119,12 +119,12 @@ const markTransform = (size, markRatio) => {
   return `translate(${round2(inset)} ${round2(inset - N_TOP * scale)}) scale(${round2(scale)})`;
 };
 
-const tileNode = (size) => ({
+const tileNode = (size, radiusRatio = TILE_RADIUS_RATIO) => ({
   element: "rect",
   attributes: {
     width: String(size),
     height: String(size),
-    rx: String(Math.round(size * TILE_RADIUS_RATIO)),
+    rx: String(Math.round(size * radiusRatio)),
     fill: "{paint:tile}",
   },
 });
@@ -151,6 +151,20 @@ export const logoIconGeometry = (size, markRatio) =>
     nodes: [tileNode(size), placedMarkNode(markTransform(size, markRatio))],
   });
 
+/**
+ * The icon with square corners, for a place that crops or masks the picture
+ * itself: a profile picture, which WhatsApp, Telegram and Google cut to a
+ * circle and Slack and LinkedIn to a square, and the iOS and Android home
+ * screens. A rounded tile there would show its transparent corners inside the
+ * crop. The n stays the app icon's, so a circle cut inside the square keeps
+ * the letter whole.
+ */
+export const logoSquareIconGeometry = (size) =>
+  freezeGeometry({
+    viewBox: `0 0 ${size} ${size}`,
+    nodes: [tileNode(size, 0), placedMarkNode(markTransform(size, APP_ICON_MARK_RATIO))],
+  });
+
 const ONE_POINT_ZERO_OUTLINE =
   "M0.86 0L0.86 -3.04L0 -3.04L0 -3.47L0.35 -3.47Q0.57 -3.47 0.71 -3.53Q0.85 -3.59 0.91 -3.73Q0.96 -3.87 0.96 -4.11L1.36 -4.11L1.36 0ZM2.25 0L2.25 -0.66L2.9 -0.66L2.9 0ZM5.07 0.09Q4.58 0.09 4.21 -0.17Q3.85 -0.43 3.65 -0.91Q3.45 -1.39 3.45 -2.05Q3.45 -2.71 3.65 -3.19Q3.85 -3.68 4.21 -3.94Q4.58 -4.2 5.07 -4.2Q5.58 -4.2 5.94 -3.94Q6.31 -3.68 6.51 -3.19Q6.71 -2.72 6.71 -2.05Q6.71 -1.39 6.51 -0.91Q6.31 -0.43 5.94 -0.17Q5.58 0.09 5.07 0.09ZM5.07 -0.39Q5.61 -0.39 5.9 -0.82Q6.19 -1.26 6.19 -2.05Q6.19 -2.58 6.06 -2.96Q5.92 -3.33 5.68 -3.52Q5.43 -3.72 5.07 -3.72Q4.72 -3.72 4.47 -3.52Q4.23 -3.33 4.1 -2.96Q3.97 -2.58 3.97 -2.05Q3.97 -1.26 4.26 -0.82Q4.55 -0.39 5.07 -0.39ZM8.97 0.09Q8.47 0.09 8.11 -0.17Q7.74 -0.43 7.54 -0.91Q7.34 -1.39 7.34 -2.05Q7.34 -2.71 7.54 -3.19Q7.74 -3.68 8.11 -3.94Q8.47 -4.2 8.97 -4.2Q9.47 -4.2 9.84 -3.94Q10.2 -3.68 10.4 -3.19Q10.6 -2.72 10.6 -2.05Q10.6 -1.39 10.4 -0.91Q10.2 -0.43 9.84 -0.17Q9.47 0.09 8.97 0.09ZM8.97 -0.39Q9.5 -0.39 9.79 -0.82Q10.08 -1.26 10.08 -2.05Q10.08 -2.58 9.95 -2.96Q9.82 -3.33 9.57 -3.52Q9.33 -3.72 8.97 -3.72Q8.62 -3.72 8.37 -3.52Q8.12 -3.33 8 -2.96Q7.86 -2.58 7.86 -2.05Q7.86 -1.26 8.15 -0.82Q8.44 -0.39 8.97 -0.39ZM12.87 0.09Q12.37 0.09 12 -0.17Q11.64 -0.43 11.44 -0.91Q11.24 -1.39 11.24 -2.05Q11.24 -2.71 11.44 -3.19Q11.64 -3.68 12 -3.94Q12.37 -4.2 12.87 -4.2Q13.37 -4.2 13.74 -3.94Q14.1 -3.68 14.3 -3.19Q14.5 -2.72 14.5 -2.05Q14.5 -1.39 14.3 -0.91Q14.1 -0.43 13.74 -0.17Q13.37 0.09 12.87 0.09ZM12.87 -0.39Q13.4 -0.39 13.69 -0.82Q13.98 -1.26 13.98 -2.05Q13.98 -2.58 13.85 -2.96Q13.72 -3.33 13.47 -3.52Q13.22 -3.72 12.87 -3.72Q12.51 -3.72 12.27 -3.52Q12.02 -3.33 11.89 -2.96Q11.76 -2.58 11.76 -2.05Q11.76 -1.26 12.05 -0.82Q12.34 -0.39 12.87 -0.39Z";