tamga-ui 0.5.4 → 0.5.5

package/CHANGELOG.md

@@ -5,6 +5,31 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
 
 > 🇹🇷 Türkçe için [tamga.org.tr/tr](https://tamga.org.tr/tr).
 
+## 0.5.5
+
+> A page title finds its size, a shell can be driven by state instead of addresses, and the
+> current rail row stands on the brand.
+
+### Added
+
+- **`AppShell` entries can carry an action instead of an address.** `NavEntry.href` was required and
+  the active row was found by comparing paths, which is right for a web panel and wrong for a
+  desktop app, where a screen is state and there is no URL. An entry may now give `onSelect`, and
+  `activePath` is then matched against its `key`. One of the two is required; nothing changes for an
+  entry that has a path.
+
+- **`AppShell.mainClassName`** — a state class on the content surface, for something the shell
+  cannot know: a window-wide drop target marking its edge, say. Layout stays the kit's; without it
+  a product had to draw the whole shell by hand to reach that one edge.
+
+### Changed
+
+- **A page title is 24px, not 40px.** `PageBand` drew its heading at `--text-display-lg`, which is
+  the reference design's own size for a marketing-width page. In a dense panel — a table under the
+  title, a filter bar above it — it took the room the data needed and read as a banner rather than a
+  heading. The scale now reads 16 section · 18 dialog · 24 page · 30 KPI, and the two token comments
+  that still called 18px "page titles" and 30px "KPI numbers only" were corrected with it.
+
 ## 0.5.4
 
 > An empty filter drawer no longer advertises itself, and a tile's icon reads as a glyph.

package/dist/components/layout.js

@@ -78,7 +78,7 @@ export function CellActions({ className, children, align = "end", ...props
  * Doküman: /docs/page-band
  */
 export function PageBand({ eyebrow, title, subtitle, actions, className, ...rest }) {
-    return (_jsxs("div", { ...dataProps(rest), className: cn("flex flex-wrap items-end gap-4", className), children: [_jsxs("div", { className: "min-w-0 flex-1 basis-65", children: [eyebrow ? (_jsx("p", { className: "mb-1.5 text-small font-semibold text-ink-faint", children: eyebrow })) : null, _jsx("h1", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5 font-display text-display-lg leading-tight font-extrabold text-ink", children: title }), subtitle ? _jsx("p", { className: "mt-1.5 text-body text-ink-soft", children: subtitle }) : null] }), actions ? _jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: actions }) : null] }));
+    return (_jsxs("div", { ...dataProps(rest), className: cn("flex flex-wrap items-end gap-4", className), children: [_jsxs("div", { className: "min-w-0 flex-1 basis-65", children: [eyebrow ? (_jsx("p", { className: "mb-1.5 text-small font-semibold text-ink-faint", children: eyebrow })) : null, _jsx("h1", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5 font-display text-display-sm leading-tight font-extrabold text-ink", children: title }), subtitle ? _jsx("p", { className: "mt-1.5 text-body text-ink-soft", children: subtitle }) : null] }), actions ? _jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: actions }) : null] }));
 }
 /**
  * Gezinen bağlantı. `Button variant="link"` DEĞİL: o bir `<button>`, yani orta

package/dist/fonts.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.5.4 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.5.5 · MIT · https://tamga.org.tr */
 @font-face {
   font-family: "Red Hat Display";
   font-style: normal;

package/dist/kit.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.5.4 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.5.5 · MIT · https://tamga.org.tr */
 :root {
 
   --overlay-gap: 8px;
@@ -440,9 +440,9 @@
 
   .tamga-rail-link[data-active="true"] {
     background: var(--color-shell);
-    border-color: var(--color-edge-strong);
+    border-color: var(--color-accent-shadow);
     transform: translate(-1px, -1px);
-    box-shadow: 3px 3px 0 var(--color-edge-strong);
+    box-shadow: 3px 3px 0 var(--color-accent-shadow);
   }
 
   .tamga-rail-link[data-active="true"] svg {
@@ -451,7 +451,7 @@
 
   .tamga-rail-link[data-active="true"]:active {
     transform: translate(2px, 2px);
-    box-shadow: 0 0 0 var(--color-edge-strong);
+    box-shadow: 0 0 0 var(--color-accent-shadow);
   }
 
   .tamga-btn:not(:disabled):active,

package/dist/patterns/app-shell.d.ts

@@ -8,8 +8,23 @@ import { type LinkComponent } from "./shared.js";
  * yönlendiriciyi tanımaz. Gerekçe: docs/adr/0004-sablon-katmani.md
  */
 export type NavEntry = {
+    /**
+     * The entry's identity. With `onSelect` it is also what `activePath` is compared against.
+     * TR: Girişin kimliği. `onSelect` ile birlikte `activePath`in karşılaştırıldığı değer de bu.
+     */
     key: string;
-    href: string;
+    /**
+     * Where the entry goes. A desktop app has no addresses: it gives `onSelect` instead, and one of
+     * the two is required.
+     * TR: Girişin gittiği yer. Masaüstü uygulamasının adresi yok; onun yerine `onSelect` veriyor ve
+     * ikisinden biri zorunlu.
+     */
+    href?: string;
+    /**
+     * Runs instead of navigating. For a shell whose screens are state, not addresses.
+     * TR: Gezinmenin yerine koşuyor · ekranları adres değil durum olan bir kabuk için.
+     */
+    onSelect?: () => void;
     /** The translated label. In the tooltip on a narrow rail, on the row itself on a wide one. TR: Çevrilmiş etiket. Dar rayda ipucunda, geniş rayda satırın kendisinde. */
     label: string;
     icon: ComponentProps<typeof Icon>["icon"];
@@ -56,6 +71,13 @@ export type AppShellProps = {
     topbar?: ReactNode;
     /** A control at the foot of the rail: an expand/collapse button, say. TR: Rayın dibine giren kontrol: genişlet/daralt düğmesi gibi. */
     railFooter?: ReactNode;
+    /**
+     * A state class on the content surface, for something the shell cannot know: a window-wide drop
+     * target marking its edge, say. Layout stays the kit's.
+     * TR: İçerik yüzeyine binen durum sınıfı · kabuğun bilemeyeceği bir şey için: pencere genelinde
+     * bir bırakma hedefinin kenarını işaretlemesi gibi. Düzen kitte kalıyor.
+     */
+    mainClassName?: string;
     linkComponent?: LinkComponent;
     labels: {
         home: string;
@@ -63,5 +85,5 @@ export type AppShellProps = {
     };
     children: ReactNode;
 };
-export declare function AppShell({ brand, nav, activePath, rail, topbar, railFooter, linkComponent: Link, labels, children, }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ brand, nav, activePath, rail, topbar, railFooter, mainClassName, linkComponent: Link, labels, children, }: AppShellProps): import("react").JSX.Element;
 //# sourceMappingURL=app-shell.d.ts.map

package/dist/patterns/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/patterns/app-shell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,wJAAwJ;IACxJ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,EAAE,SAAS,QAAQ,EAAE,CAAC;IACzB,mGAAmG;IACnG,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,uIAAuI;IACvI,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,GAAG,EACH,UAAU,EACV,IAAe,EACf,MAAM,EACN,UAAU,EACV,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+BAmHf"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/patterns/app-shell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAG7C,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,wJAAwJ;IACxJ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,EAAE,SAAS,QAAQ,EAAE,CAAC;IACzB,mGAAmG;IACnG,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,uIAAuI;IACvI,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,GAAG,EACH,UAAU,EACV,IAAe,EACf,MAAM,EACN,UAAU,EACV,aAAa,EACb,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+BAsHf"}

package/dist/patterns/app-shell.js

@@ -3,16 +3,18 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Fragment } from "react";
 import { Icon } from "../components/icon.js";
 import { RailLink } from "../components/rail-link.js";
+import { cn } from "../lib/cn.js";
 import { PlainLink } from "./shared.js";
-export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, railFooter, linkComponent: Link = PlainLink, labels, children, }) {
+export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, railFooter, mainClassName, linkComponent: Link = PlainLink, labels, children, }) {
     /* Bir giriş kendi alt ağacına sahip, ve EN UZUN EŞLEŞEN KAZANIR: kökün `/`
        olmadığı bir panelde kök giriş altındaki her rotayı yutuyordu.
        Gerekçe: docs/gerekce/08-blok-ve-sablon.md */
     const kapsiyor = (href) => activePath === href || activePath.startsWith(`${href}/`);
-    const enOzel = nav.reduce((kazanan, entry) => kapsiyor(entry.href) && (kazanan === null || entry.href.length > kazanan.length)
+    const enOzel = nav.reduce((kazanan, entry) => entry.href && kapsiyor(entry.href) && (kazanan === null || entry.href.length > kazanan.length)
         ? entry.href
         : kazanan, null);
-    const isCurrent = (href) => href === enOzel;
+    /* ADRESİ OLMAYAN GİRİŞ ANAHTARIYLA EŞLEŞİYOR: masaüstü kabuğunda ekran bir durum, yol değil. */
+    const isCurrent = (entry) => entry.href ? entry.href === enOzel : entry.key === activePath;
     const wide = rail === "wide";
-    return (_jsxs("div", { className: "flex h-dvh w-full overflow-hidden bg-rail text-ink-soft", children: [_jsxs("aside", { className: `flex shrink-0 flex-col gap-2 bg-rail py-4 ${wide ? "w-60 px-3" : "w-20 items-center px-1"}`, "data-rail": rail, children: [brand ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": labels.home, className: `mb-2 flex h-10 shrink-0 items-center text-ink ${wide ? "px-2" : "w-10 justify-center"}`, children: brand }), _jsx("span", { className: `h-0 w-6 border-t border-line ${wide ? "ml-2" : ""}` })] })) : null, _jsx("nav", { "aria-label": labels.primaryNav, className: `tamga-rail-scroll flex w-full flex-1 flex-col gap-2 py-1 ${wide ? "" : "items-center"}`, children: nav.map((entry, i) => (_jsxs(Fragment, { children: [wide && entry.section && entry.section !== nav[i - 1]?.section ? (_jsx("p", { className: `px-2.5 text-caption font-bold uppercase tracking-label text-ink-faint ${i > 0 ? "mt-5 pb-1.5" : "pb-1.5"}`, children: entry.section })) : null, _jsx(RailLink, { href: entry.href, label: entry.label, active: isCurrent(entry.href), showLabel: wide, linkComponent: Link, "data-nav": entry.key, children: _jsx(Icon, { icon: entry.icon, size: "md", weight: isCurrent(entry.href) ? "fill" : "regular" }) })] }, entry.key))) }), railFooter ? _jsx("div", { className: "shrink-0", children: railFooter }) : null] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("header", { className: "tamga-gutter flex items-center gap-4 bg-band py-4", children: topbar }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pr-4 pb-4", children: _jsx("main", { className: "tamga-surface tamga-app-main relative h-full min-h-0 overflow-y-auto", children: children }) })] })] }));
+    return (_jsxs("div", { className: "flex h-dvh w-full overflow-hidden bg-rail text-ink-soft", children: [_jsxs("aside", { className: `flex shrink-0 flex-col gap-2 bg-rail py-4 ${wide ? "w-60 px-3" : "w-20 items-center px-1"}`, "data-rail": rail, children: [brand ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": labels.home, className: `mb-2 flex h-10 shrink-0 items-center text-ink ${wide ? "px-2" : "w-10 justify-center"}`, children: brand }), _jsx("span", { className: `h-0 w-6 border-t border-line ${wide ? "ml-2" : ""}` })] })) : null, _jsx("nav", { "aria-label": labels.primaryNav, className: `tamga-rail-scroll flex w-full flex-1 flex-col gap-2 py-1 ${wide ? "" : "items-center"}`, children: nav.map((entry, i) => (_jsxs(Fragment, { children: [wide && entry.section && entry.section !== nav[i - 1]?.section ? (_jsx("p", { className: `px-2.5 text-caption font-bold uppercase tracking-label text-ink-faint ${i > 0 ? "mt-5 pb-1.5" : "pb-1.5"}`, children: entry.section })) : null, _jsx(RailLink, { href: entry.href, onClick: entry.onSelect, label: entry.label, active: isCurrent(entry), showLabel: wide, linkComponent: Link, "data-nav": entry.key, children: _jsx(Icon, { icon: entry.icon, size: "md", weight: isCurrent(entry) ? "fill" : "regular" }) })] }, entry.key))) }), railFooter ? _jsx("div", { className: "shrink-0", children: railFooter }) : null] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("header", { className: "tamga-gutter flex items-center gap-4 bg-band py-4", children: topbar }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pr-4 pb-4", children: _jsx("main", { className: cn("tamga-surface tamga-app-main relative h-full min-h-0 overflow-y-auto", mainClassName), children: children }) })] })] }));
 }

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.5.4 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.5.5 · MIT · https://tamga.org.tr */
 @import "./fonts.css";
 @import "./theme.css";
 @import "./kit.css";

package/dist/theme.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.5.4 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.5.5 · MIT · https://tamga.org.tr */
 @custom-variant dark (&:is(.dark *));
 
 @theme static {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tamga-ui",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "Mant\u0131ksal's shared interface library: tokens, physics and components.",
   "license": "MIT",
   "type": "module",