tamga-ui 0.5.9 → 0.6.0

package/CHANGELOG.md

@@ -5,6 +5,29 @@ 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.6.0
+
+> Sections fold; the one you are in never does.
+
+### Added
+
+- **`AppShell` section headers fold.** In the wide rail every section header is now a button:
+  click it and the section's entries slide shut; click again and they return. A customer with
+  eight sections asked for exactly this — the rail had become a wall. Three rules keep it honest:
+  the open page's section never folds (you can always read where you are), a route that lands
+  inside a folded section finds it open, and the narrow rail is untouched (nothing to fold when
+  there are no headers). New props: `collapsibleSections` (default `true`), `collapsedSections`
+  for a controlled rail, `onSectionToggle(section, open)`. Where the preference lives — browser,
+  account, device — is the product's call; the shell never writes storage.
+
+### Breaking
+
+- Section headers in the wide rail are `<button aria-expanded>` elements instead of `<p>`, and
+  each section's links now sit inside a `.tamga-rail-group-body` wrapper rather than directly
+  under `<nav>`. A selector written as `nav > .tamga-rail-link` or a test that read the header
+  as a paragraph needs updating; `data-nav` on every link is unchanged and is the supported hook.
+  Pass `collapsibleSections={false}` to keep plain headers (the wrapper stays either way).
+
 ## 0.5.9
 
 > The hook lands on the root, in every branch.

package/dist/fonts.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.5.9 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.6.0 · 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.9 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.6.0 · MIT · https://tamga.org.tr */
 :root {
 
   --overlay-gap: 8px;
@@ -380,6 +380,69 @@
     display: none;
   }
 
+  .tamga-rail-section {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-ctl);
+    color: var(--color-ink-faint);
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    font-size: var(--text-caption);
+    font-weight: 700;
+    gap: 6px;
+    letter-spacing: var(--tracking-label);
+    padding: 4px 10px;
+    text-align: left;
+    text-transform: uppercase;
+    transition: background var(--duration-press) var(--ease-standard), color var(--duration-press) var(--ease-standard);
+    width: 100%;
+  }
+  .tamga-rail-section:hover {
+    background: var(--color-hover);
+    color: var(--color-ink);
+  }
+  .tamga-rail-section[data-locked="true"] {
+    cursor: default;
+  }
+  .tamga-rail-section[data-locked="true"]:hover {
+    background: transparent;
+    color: var(--color-ink-faint);
+  }
+  .tamga-rail-section-caret {
+    margin-left: auto;
+    transition: transform var(--duration-press) var(--ease-standard), opacity var(--duration-press) var(--ease-standard);
+  }
+  .tamga-rail-section[aria-expanded="false"] .tamga-rail-section-caret {
+    transform: rotate(-90deg);
+  }
+  .tamga-rail-section[data-locked="true"] .tamga-rail-section-caret {
+    opacity: 0.35;
+  }
+
+  .tamga-rail-group-body {
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows var(--duration-press) var(--ease-standard);
+  }
+  .tamga-rail-group-body > div {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .tamga-rail-group-body[data-open="false"] {
+    grid-template-rows: 0fr;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .tamga-rail-group-body,
+    .tamga-rail-section-caret {
+      transition: none;
+    }
+  }
+
   .tamga-rail-link {
     position: relative;
     display: flex;

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

@@ -79,11 +79,30 @@ export type AppShellProps = {
      */
     mainClassName?: string;
     linkComponent?: LinkComponent;
+    /**
+     * Section headers fold. On, each header in the wide rail is a button that hides its entries; the
+     * open page's section never folds, and a route landing inside a folded section finds it open.
+     * Off, headers are plain labels, the pre-0.6 rail. TR: Bölüm başlıkları katlanır. Açıkken geniş
+     * raydaki her başlık girişlerini gizleyen bir düğme; açık sayfanın bölümü hiç katlanmaz, kapalı
+     * bir bölüme düşen rota onu açık bulur. Kapalıyken başlıklar düz etiket, 0.6 öncesi ray.
+     */
+    collapsibleSections?: boolean;
+    /**
+     * The folded sections, by name. Given, the shell is controlled: a click only reports through
+     * `onSectionToggle`, and the product decides. Absent, the shell keeps the state itself and forgets
+     * it on reload · where a preference lives (browser, account, device) is the product's call.
+     * TR: Kapalı bölümler, adıyla. Verilirse kabuk kontrollü: tık yalnız `onSectionToggle` ile haber
+     * verir, kararı ürün verir. Verilmezse kabuk durumu kendi tutar ve yenilemede unutur · tercihin
+     * nerede yaşadığı (tarayıcı, hesap, cihaz) ürünün kararı.
+     */
+    collapsedSections?: readonly string[];
+    /** Fires with the section name and whether it is now open. TR: Bölüm adı ve artık açık olup olmadığıyla ateşlenir. */
+    onSectionToggle?: (section: string, open: boolean) => void;
     labels: {
         home: string;
         primaryNav: string;
     };
     children: ReactNode;
 };
-export declare function AppShell({ brand, nav, activePath, rail, topbar, railFooter, mainClassName, linkComponent: Link, labels, children, }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ brand, nav, activePath, rail, topbar, railFooter, mainClassName, linkComponent: Link, collapsibleSections, collapsedSections, onSectionToggle, 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;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,+BA+Hf"}
+{"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;AAI7C,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;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,sHAAsH;IACtH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,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,mBAA0B,EAC1B,iBAAiB,EACjB,eAAe,EACf,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+BA+Kf"}

package/dist/patterns/app-shell.js

@@ -1,11 +1,12 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import { Fragment, useId, useState } from "react";
 import { Icon } from "../components/icon.js";
+import { CaretDown } from "../components/icons.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, mainClassName, linkComponent: Link = PlainLink, labels, children, }) {
+export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, railFooter, mainClassName, linkComponent: Link = PlainLink, collapsibleSections = true, collapsedSections, onSectionToggle, 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 */
@@ -16,5 +17,38 @@ export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, rail
     /* 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: [entry.section && entry.section !== nav[i - 1]?.section ? (wide ? (_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 })) : i > 0 ? (_jsx("span", { className: "my-1.5 h-0 w-6 shrink-0 border-t border-line", "aria-hidden": true })) : null) : 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 }) })] })] }));
+    /* KATLAMA. Kapalı liste ya üründen gelir (kontrollü) ya da burada tutulur.
+       AÇIK SAYFANIN BÖLÜMÜ HEP AÇIK: "neredeyim" raydan okunmalı · kapalı bir
+       bölüme yönlendirmeyle düşen kullanıcı da onu açık bulur, listeyi
+       değiştirmeden. Dar rayda başlık yok, dolayısıyla katlanacak şey de yok. */
+    const [icKapali, setIcKapali] = useState([]);
+    const kapali = collapsedSections ?? icKapali;
+    const aktifBolum = nav.find(isCurrent)?.section;
+    const acikMi = (bolum) => !wide || !collapsibleSections || bolum === aktifBolum || !kapali.includes(bolum);
+    const degistir = (bolum) => {
+        if (bolum === aktifBolum)
+            return;
+        const sonraki = !acikMi(bolum);
+        onSectionToggle?.(bolum, sonraki);
+        if (collapsedSections === undefined) {
+            setIcKapali((k) => (sonraki ? k.filter((x) => x !== bolum) : [...k, bolum]));
+        }
+    };
+    /* Ardışık girişler bölüm adına göre kümeleniyor; adı olmayanlar kendi
+       kümesinde, başlıksız. Veri düz kalıyor (bkz. `section`), küme çizim için. */
+    const gruplar = [];
+    for (const entry of nav) {
+        const son = gruplar[gruplar.length - 1];
+        if (son && son.bolum === entry.section)
+            son.girisler.push(entry);
+        else
+            gruplar.push({ bolum: entry.section, girisler: [entry] });
+    }
+    const kimlik = useId();
+    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: gruplar.map((grup, gi) => {
+                            const id = `${kimlik}-${gi}`;
+                            const acik = grup.bolum ? acikMi(grup.bolum) : true;
+                            const kilitli = grup.bolum !== undefined && grup.bolum === aktifBolum;
+                            return (_jsxs(Fragment, { children: [grup.bolum ? (wide ? (collapsibleSections ? (_jsxs("button", { type: "button", className: cn("tamga-rail-section", gi > 0 && "mt-3"), "aria-expanded": acik, "aria-controls": id, "aria-disabled": kilitli || undefined, "data-locked": kilitli || undefined, onClick: () => degistir(grup.bolum), children: [grup.bolum, _jsx(Icon, { icon: CaretDown, size: "xs", weight: "bold", className: "tamga-rail-section-caret" })] })) : (_jsx("p", { className: `px-2.5 text-caption font-bold uppercase tracking-label text-ink-faint ${gi > 0 ? "mt-5 pb-1.5" : "pb-1.5"}`, children: grup.bolum }))) : gi > 0 ? (_jsx("span", { className: "my-1.5 h-0 w-6 shrink-0 border-t border-line", "aria-hidden": true })) : null) : null, _jsx("div", { id: id, className: "tamga-rail-group-body", "data-open": acik, inert: !acik, children: _jsx("div", { className: wide ? undefined : "items-center", children: grup.girisler.map((entry) => (_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))) }) })] }, grup.bolum ?? `_${gi}`));
+                        }) }), 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.9 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.6.0 · 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.9 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.6.0 · 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.9",
+  "version": "0.6.0",
   "description": "Mant\u0131ksal's shared interface library: tokens, physics and components.",
   "license": "MIT",
   "type": "module",