@suphark/ui 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.10.0] — 2026-09-21
+
+### Added
+
+- **`SectionNav`** (`@suphark/ui/next`, สเปกจาก Pi Auth — ชิ้นสุดท้ายที่แอปยังประกอบเอง) — หัวหมวด + แถบแท็บย่อยใต้หัวข้อสำหรับ layout ของหมวดที่มีหลายหน้า (directory/access/security/integrations): `title`/`description`/`actions` ส่งต่อ `PageHeader`, `tabs[{ href? | slug?, label, exact?, badge? }]` (href หรือ `${base}/${slug}`), แต่ละแท็บเป็น `NavLink` (`-mb-px border-b-2` ไฮไลต์ `border-primary` ตาม pathname, `aria-current=page`), badge ต่อท้าย label, `navLabel` (ค่าเริ่มต้น `UiText.sectionNav.tabs` — "แท็บย่อย"/"Section tabs"), ไม่มี tabs = ไม่มี nav; ไม่มี state ใช้จาก server component ได้ (เฉพาะแถบ `<nav>` เป็น client component เล็ก ๆ เพื่ออ่าน UiText); types `SectionNavProps`, `SectionNavTab`; `UiText.sectionNav` (optional)
+- showcase: หน้า `section-nav` — 97 หน้า; tests 3 กรณี (รวม 126)
+
+## [0.9.0] — 2026-09-21
+
+### Added
+
+- **`RuleBuilder<F extends string>`** (barrel, สเปกจาก Pi Files — แทน rule-builder ชั่วคราว 390 บรรทัดของกฎ storage/lifecycle) — ตัวสร้างเงื่อนไขแบบต้นไม้ AND/OR/NOT ซ้อนได้ generic ไม่ผูก schema: แอปส่ง `fields[{ key, label, operators[{ value, label }], defaultLeaf(), renderValue({ leaf, onChange, disabled }), describe?, group?, disabled?: boolean | string }]` (ตัวแก้ค่าเป็นของแอป — ToggleGroup/Input/number+หน่วย), component จัดโครง: กลุ่ม = กรอบ (root border ปกติ, ลูก border-dashed bg-muted/30) + ToggleGroup and/or + ปุ่ม "เงื่อนไข"/"กลุ่มย่อย" (ซ่อนเมื่อถึง `maxDepth` ค่าเริ่มต้น 3 รวม root; กลุ่มใหม่สลับ op จากแม่), leaf = grid `[ฟิลด์ 11rem | operator (เมื่อ >1) | ค่า | NOT]` มือถือเรียงลง (เปลี่ยนฟิลด์ → `defaultLeaf()` ของฟิลด์ใหม่), NOT = กรอบ border-destructive/40 + ป้าย "ไม่ใช่" + ปุ่ม "เอา NOT ออก" (`allowNot`), ปุ่มลบทุก item; ฟิลด์ใช้ `NativeSelect` (`label` เป็น string, `group` = optgroup, `disabled` string = title เหตุผล, ฟิลด์ที่เลือกอยู่แล้วไม่ถูกปิด), key ของ item คงที่ต่อ object (WeakMap) แก้ item หนึ่งไม่ re-mount พี่น้อง, `onChange` ต้นไม้ใหม่ทั้งก้อน immutable, `role=group` aria-label "กลุ่ม AND ระดับ n", `disabled` ทั้ง builder, `showSummary` ประโยคสรุปใต้ builder, `defaultField`, `language`/`text` (and/or/not/wrapNot/addCondition/addGroup/removeCondition/removeNot/emptyAnd/emptyOr/summary/field/operator/group()/andJoin/orJoin/notPrefix/unknownField()); data-slot `rule-builder`/`rule-group[data-op][data-depth]`/`rule-item`/`rule-leaf`/`rule-not`/`rule-builder-summary`
+- types `RuleLeaf<F>`/`RuleGroup<F>`/`RuleNot<F>`/`RuleCondition<F>`/`RuleFieldDef<F>`/`RuleBuilderProps<F>`/`RuleBuilderText`; helpers **`describeCondition(cond, fields, text?, language?)`** (AND " และ ", OR " หรือ ", NOT "ไม่ใช่ …", กลุ่มย่อย >1 ข้อครอบวงเล็บ, leaf ใช้ `describe` ของฟิลด์หรือ "label operator value", ฟิลด์ไม่รู้จัก → "ฟิลด์ไม่รู้จัก: key"), `isRuleGroup`/`isRuleNot` type guards, `emptyGroup(op = "and")`
+- showcase: หน้า `rule-builder` (ชุดกฎ storage ตัวอย่าง + JSON สด) — 96 หน้า; tests 4 กรณี (รวม 123)
+
+### Fixed
+
+- **`CommandItem` ที่ active มองไม่ออกว่าตัวไหน** (รายงานจาก Pi Done ใน dark mode): shadcn ใช้ `data-selected:bg-muted` แต่ Tailwind `data-selected:` = `[data-selected]` (มีแอตทริบิวต์) ขณะที่ cmdk ใส่ `data-selected="false"` ให้รายการอื่นด้วย → ทุกแถวได้ bg-muted เท่ากัน; `styles.css` override `[data-slot=command-item][data-selected="true"]` เป็น `color-mix(muted, foreground 8%)` (dark 14%) — ไม่แตะ `command.tsx` ของ shadcn (CommandPalette, Combobox, SearchableSelect ได้ผลด้วย)
+
 ## [0.8.0] — 2026-09-21
 
 รอบ feedback หลังทุกแอปย้ายมา 0.7.0 ครบ 6/6 — สเปกจาก Pi Done (ColorPicker, CommandPalette client-side), Pi Mail (ActionForm), Pi Files (file explorer 4 ตัว) ทำรวดเดียว; minor ทั้งหมด ไม่เปลี่ยน API เดิม

package/README.md

@@ -60,7 +60,7 @@ import { ThemeProvider, Toaster } from "@suphark/ui";
 ```ts
 // ทุกอย่างที่ไม่พึ่ง Next — primitives, shared, theme, hooks, cn
 import { Button, Card, FormFieldInput, StatusBadge, ThemeToggle, ConfirmDialog, useConfirm, cn } from "@suphark/ui";
-// file explorer / picker: TreeView, Dropzone, UploadList, FileTypeIcon, ColorPicker, IconPicker, CalendarMonthGrid ก็อยู่ barrel
+// file explorer / picker / rule: TreeView, Dropzone, UploadList, FileTypeIcon, ColorPicker, IconPicker, CalendarMonthGrid, RuleBuilder ก็อยู่ barrel
 
 // ของที่ใช้ next/navigation หรือ next/link + โครงแอป
 import { AppShell, UserMenu, filterNav, FormDialog, RowActions, LinkButton, RefreshButton, PageShell } from "@suphark/ui/next";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

package/src/components/shared/navigation/section-nav-bar.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import type { ReactNode } from "react";
+
+/** แถบแท็บของ SectionNav — แยกเป็น client เพื่ออ่าน aria-label ค่าเริ่มต้นจาก UiText (context) */
+export function SectionNavBar({ label, children }: { label?: string; children: ReactNode }) {
+  const text = useUiText();
+  return (
+    <nav
+      aria-label={label ?? text.sectionNav?.tabs ?? "แท็บย่อย"}
+      className="flex flex-wrap gap-1 border-b text-sm"
+    >
+      {children}
+    </nav>
+  );
+}

package/src/components/shared/navigation/section-nav.tsx

@@ -0,0 +1,79 @@
+import { NavLink } from "@suphark/ui/components/app-shell/nav-link";
+import { PageHeader } from "@suphark/ui/components/shared/page-header";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+import { SectionNavBar } from "./section-nav-bar";
+
+export interface SectionNavTab {
+  /** ลิงก์เต็ม — หรือส่ง `slug` แล้วให้ `base` ของ SectionNav ประกอบเป็น `${base}/${slug}` */
+  href?: string;
+  slug?: string;
+  label: ReactNode;
+  /** active เฉพาะ path ตรงเป๊ะ (ค่าเริ่มต้น prefix match) */
+  exact?: boolean;
+  /** ต่อท้าย label เช่น จำนวน */
+  badge?: ReactNode;
+}
+
+export interface SectionNavProps {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  /** prefix ของ href เมื่อแท็บให้ `slug` (เช่น "/directory") */
+  base?: string;
+  tabs?: ReadonlyArray<SectionNavTab>;
+  /** aria-label ของแถบแท็บ (ค่าเริ่มต้น `UiText.sectionNav.tabs` — "แท็บย่อย") */
+  navLabel?: string;
+  className?: string;
+}
+
+function tabHref(tab: SectionNavTab, base?: string): string {
+  if (tab.href) return tab.href;
+  const b = (base ?? "").replace(/\/+$/, "");
+  return `${b}/${(tab.slug ?? "").replace(/^\/+/, "")}`;
+}
+
+/**
+ * หัวหมวด + แถบแท็บย่อยใต้หัวข้อ สำหรับ layout ของหมวดที่มีหลายหน้า (directory/access/security/integrations …)
+ * = `PageHeader` + `NavLink` แต่ละแท็บ (ไฮไลต์ตาม pathname) — ไม่มี state ใช้จาก server component ได้
+ *
+ *   <SectionNav title="ไดเรกทอรี" base="/directory" tabs={[{ slug: "users", label: "ผู้ใช้" }, { slug: "groups", label: "กลุ่ม", badge: 3 }]} />
+ */
+export function SectionNav({
+  title,
+  description,
+  actions,
+  base,
+  tabs,
+  navLabel,
+  className,
+}: SectionNavProps) {
+  return (
+    <div data-slot="section-nav" className={cn("flex flex-col gap-3", className)}>
+      <PageHeader title={title} description={description} actions={actions} />
+      {tabs && tabs.length > 0 && (
+        <SectionNavBar label={navLabel}>
+          {tabs.map((tab) => {
+            const href = tabHref(tab, base);
+            return (
+              <NavLink
+                key={href}
+                href={href}
+                exact={tab.exact}
+                className="-mb-px inline-flex items-center gap-1.5 border-transparent border-b-2 px-3 py-2 text-muted-foreground transition-colors hover:text-foreground"
+                activeClassName="border-primary font-medium text-foreground"
+              >
+                {tab.label}
+                {tab.badge != null && (
+                  <span className="rounded-full bg-muted px-1.5 text-muted-foreground text-xs tabular-nums">
+                    {tab.badge}
+                  </span>
+                )}
+              </NavLink>
+            );
+          })}
+        </SectionNavBar>
+      )}
+    </div>
+  );
+}

package/src/components/shared/rule-builder.tsx

@@ -0,0 +1,465 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  NativeSelect,
+  NativeSelectOptGroup,
+  NativeSelectOption,
+} from "@suphark/ui/components/ui/native-select";
+import { ToggleGroup, ToggleGroupItem } from "@suphark/ui/components/ui/toggle-group";
+import { cn } from "@suphark/ui/lib/utils";
+import { Plus, X } from "lucide-react";
+import type { ReactNode } from "react";
+
+// ---------- ชนิดข้อมูล (แอปเก็บ/ส่ง server ในรูปนี้ได้ตรง ๆ) ----------
+
+export type RuleLeaf<F extends string = string> = { field: F; operator: string; value: unknown };
+export type RuleGroup<F extends string = string> = { op: "and" | "or"; items: RuleCondition<F>[] };
+export type RuleNot<F extends string = string> = { op: "not"; item: RuleCondition<F> };
+export type RuleCondition<F extends string = string> = RuleLeaf<F> | RuleGroup<F> | RuleNot<F>;
+
+export function isRuleGroup<F extends string>(c: RuleCondition<F>): c is RuleGroup<F> {
+  return "op" in c && (c.op === "and" || c.op === "or");
+}
+export function isRuleNot<F extends string>(c: RuleCondition<F>): c is RuleNot<F> {
+  return "op" in c && c.op === "not";
+}
+export function emptyGroup<F extends string = string>(op: "and" | "or" = "and"): RuleGroup<F> {
+  return { op, items: [] };
+}
+
+export interface RuleFieldDef<F extends string = string> {
+  key: F;
+  /** ชื่อฟิลด์ (ข้อความ — แสดงใน `<select>` จึงเป็น string) */
+  label: string;
+  /** ตัวดำเนินการที่ฟิลด์นี้รองรับ — 1 ตัว = ซ่อน select operator */
+  operators: ReadonlyArray<{ value: string; label: string }>;
+  /** ค่าเริ่มต้นเมื่อเลือกฟิลด์นี้ (ทั้ง operator + value) */
+  defaultLeaf: () => RuleLeaf<F>;
+  /** ตัวแก้ค่า — แอปส่ง component เอง (ToggleGroup / Input / number+หน่วย …) */
+  renderValue: (props: {
+    leaf: RuleLeaf<F>;
+    onChange: (leaf: RuleLeaf<F>) => void;
+    disabled?: boolean;
+  }) => ReactNode;
+  /** ประโยคสรุปของ leaf (ใช้ใน `describeCondition`) — ไม่ส่ง = "label operator value" */
+  describe?: (leaf: RuleLeaf<F>) => string;
+  /** จัดกลุ่มใน select ฟิลด์ (optgroup) */
+  group?: string;
+  /** true = เลือกไม่ได้; string = เหตุผล (แสดงเป็น title ของตัวเลือก) */
+  disabled?: boolean | string;
+}
+
+export interface RuleBuilderText {
+  and: string;
+  or: string;
+  /** ป้ายกรอบ NOT */
+  not: string;
+  /** ปุ่มครอบ leaf ด้วย NOT */
+  wrapNot: string;
+  addCondition: string;
+  addGroup: string;
+  removeCondition: string;
+  removeNot: string;
+  emptyAnd: string;
+  emptyOr: string;
+  summary: string;
+  field: string;
+  operator: string;
+  /** aria-label ของกลุ่ม */
+  group: (op: "and" | "or", level: number) => string;
+  /** ตัวเชื่อมในประโยคสรุป */
+  andJoin: string;
+  orJoin: string;
+  notPrefix: string;
+  unknownField: (key: string) => string;
+}
+
+const TEXT: Record<"th" | "en", RuleBuilderText> = {
+  th: {
+    and: "ต้องตรงทุกข้อ (AND)",
+    or: "ตรงข้อใดข้อหนึ่ง (OR)",
+    not: "ไม่ใช่",
+    wrapNot: "NOT",
+    addCondition: "เงื่อนไข",
+    addGroup: "กลุ่มย่อย",
+    removeCondition: "ลบเงื่อนไข",
+    removeNot: "เอา NOT ออก",
+    emptyAnd: "ยังไม่มีเงื่อนไข = ตรงทุกรายการ",
+    emptyOr: "ยังไม่มีเงื่อนไข = ไม่ตรงอะไรเลย",
+    summary: "สรุป",
+    field: "ฟิลด์",
+    operator: "ตัวดำเนินการ",
+    group: (op, level) => `กลุ่ม ${op.toUpperCase()} ระดับ ${level}`,
+    andJoin: " และ ",
+    orJoin: " หรือ ",
+    notPrefix: "ไม่ใช่ ",
+    unknownField: (key) => `ฟิลด์ไม่รู้จัก: ${key}`,
+  },
+  en: {
+    and: "Match all (AND)",
+    or: "Match any (OR)",
+    not: "NOT",
+    wrapNot: "NOT",
+    addCondition: "Condition",
+    addGroup: "Subgroup",
+    removeCondition: "Remove condition",
+    removeNot: "Remove NOT",
+    emptyAnd: "No conditions = matches everything",
+    emptyOr: "No conditions = matches nothing",
+    summary: "Summary",
+    field: "Field",
+    operator: "Operator",
+    group: (op, level) => `${op.toUpperCase()} group level ${level}`,
+    andJoin: " and ",
+    orJoin: " or ",
+    notPrefix: "not ",
+    unknownField: (key) => `Unknown field: ${key}`,
+  },
+};
+
+function resolveText(language: "th" | "en", text?: Partial<RuleBuilderText>): RuleBuilderText {
+  return { ...TEXT[language], ...text };
+}
+
+/** ประโยคสรุปของเงื่อนไข: AND " และ ", OR " หรือ ", NOT "ไม่ใช่ …", กลุ่มย่อยที่มี >1 ข้อครอบวงเล็บ */
+export function describeCondition<F extends string>(
+  cond: RuleCondition<F>,
+  fields: ReadonlyArray<RuleFieldDef<F>>,
+  text?: Partial<RuleBuilderText>,
+  language: "th" | "en" = "th",
+): string {
+  const t = resolveText(language, text);
+  const walk = (c: RuleCondition<F>, nested: boolean): string => {
+    if (isRuleGroup(c)) {
+      if (c.items.length === 0) return c.op === "and" ? t.emptyAnd : t.emptyOr;
+      const parts = c.items.map((i) => walk(i, true));
+      const s = parts.join(c.op === "and" ? t.andJoin : t.orJoin);
+      return nested && parts.length > 1 ? `(${s})` : s;
+    }
+    if (isRuleNot(c)) return `${t.notPrefix}${walk(c.item, true)}`;
+    const def = fields.find((f) => f.key === c.field);
+    if (!def) return t.unknownField(c.field);
+    if (def.describe) return def.describe(c);
+    const op = def.operators.find((o) => o.value === c.operator)?.label ?? c.operator;
+    const v = Array.isArray(c.value) ? c.value.join("/") : String(c.value ?? "");
+    return `${def.label} ${op} ${v}`.trim();
+  };
+  return walk(cond, false);
+}
+
+// key คงที่ต่อ object ของเงื่อนไข — แก้ item หนึ่งไม่ทำให้พี่น้อง re-mount (ไม่ใช้ index เป็น key)
+const keys = new WeakMap<object, string>();
+let keySeq = 0;
+function keyOf(item: object): string {
+  let k = keys.get(item);
+  if (!k) {
+    k = `rule-${++keySeq}`;
+    keys.set(item, k);
+  }
+  return k;
+}
+
+export interface RuleBuilderProps<F extends string = string> {
+  value: RuleCondition<F>;
+  /** ส่งต้นไม้ใหม่ทั้งก้อน (immutable) */
+  onChange: (next: RuleCondition<F>) => void;
+  fields: ReadonlyArray<RuleFieldDef<F>>;
+  /** จำนวนระดับกลุ่มสูงสุดรวม root (ค่าเริ่มต้น 3 = root + ซ้อนได้อีก 2) */
+  maxDepth?: number;
+  /** อนุญาต NOT (ค่าเริ่มต้น true) */
+  allowNot?: boolean;
+  /** ฟิลด์เริ่มต้นเมื่อกด "เพิ่มเงื่อนไข" (ค่าเริ่มต้น ฟิลด์แรกที่ไม่ disabled) */
+  defaultField?: F;
+  disabled?: boolean;
+  /** แสดงประโยคสรุปใต้ builder */
+  showSummary?: boolean;
+  language?: "th" | "en";
+  text?: Partial<RuleBuilderText>;
+  className?: string;
+}
+
+interface Ctx<F extends string> {
+  fields: ReadonlyArray<RuleFieldDef<F>>;
+  text: RuleBuilderText;
+  maxDepth: number;
+  allowNot: boolean;
+  disabled: boolean;
+  newLeaf: () => RuleLeaf<F>;
+}
+
+/**
+ * ตัวสร้างเงื่อนไขแบบต้นไม้ AND/OR/NOT ซ้อนได้ (rule builder) — แอปกำหนดฟิลด์/ตัวดำเนินการ/ตัวแก้ค่าเอง
+ * ผ่าน `fields`; component จัดโครง กลุ่ม ปุ่ม การเยื้อง และ a11y — ยกจาก Pi Files (กฎ storage/lifecycle)
+ *
+ *   <RuleBuilder value={cond} onChange={setCond} fields={FIELDS} maxDepth={3} showSummary />
+ */
+export function RuleBuilder<F extends string = string>({
+  value,
+  onChange,
+  fields,
+  maxDepth = 3,
+  allowNot = true,
+  defaultField,
+  disabled = false,
+  showSummary = false,
+  language = "th",
+  text: textProp,
+  className,
+}: RuleBuilderProps<F>) {
+  const text = resolveText(language, textProp);
+  const firstField =
+    fields.find((f) => f.key === defaultField) ?? fields.find((f) => !f.disabled) ?? fields[0];
+  const ctx: Ctx<F> = {
+    fields,
+    text,
+    maxDepth,
+    allowNot,
+    disabled,
+    newLeaf: () =>
+      firstField
+        ? firstField.defaultLeaf()
+        : ({ field: "" as F, operator: "", value: null } as RuleLeaf<F>),
+  };
+  return (
+    <div data-slot="rule-builder" className={cn("flex flex-col gap-2", className)}>
+      <ConditionNode value={value} onChange={onChange} ctx={ctx} depth={0} />
+      {showSummary && (
+        <p className="text-muted-foreground text-xs" data-slot="rule-builder-summary">
+          <span className="font-medium">{text.summary}: </span>
+          {describeCondition(value, fields, textProp, language)}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function ConditionNode<F extends string>({
+  value,
+  onChange,
+  ctx,
+  depth,
+}: {
+  value: RuleCondition<F>;
+  onChange: (next: RuleCondition<F>) => void;
+  ctx: Ctx<F>;
+  depth: number;
+}) {
+  const { text, disabled } = ctx;
+  if (isRuleGroup(value)) {
+    const canNest = depth < ctx.maxDepth - 1;
+    return (
+      <div
+        role="group"
+        aria-label={text.group(value.op, depth + 1)}
+        data-slot="rule-group"
+        data-op={value.op}
+        data-depth={depth}
+        className={cn(
+          "flex flex-col gap-2 rounded-lg border p-2",
+          depth > 0 && "border-dashed bg-muted/30",
+        )}
+      >
+        <div className="flex flex-wrap items-center gap-2">
+          <ToggleGroup
+            value={[value.op]}
+            onValueChange={(v) => {
+              const op = (v as Array<"and" | "or">)[0];
+              if (op && op !== value.op) onChange({ ...value, op });
+            }}
+            variant="outline"
+            size="sm"
+            disabled={disabled}
+            aria-label={text.operator}
+          >
+            <ToggleGroupItem value="and">{text.and}</ToggleGroupItem>
+            <ToggleGroupItem value="or">{text.or}</ToggleGroupItem>
+          </ToggleGroup>
+          <div className="ml-auto flex gap-1">
+            <Button
+              type="button"
+              size="xs"
+              variant="outline"
+              disabled={disabled}
+              onClick={() => onChange({ ...value, items: [...value.items, ctx.newLeaf()] })}
+            >
+              <Plus />
+              {text.addCondition}
+            </Button>
+            {canNest && (
+              <Button
+                type="button"
+                size="xs"
+                variant="ghost"
+                disabled={disabled}
+                onClick={() =>
+                  onChange({
+                    ...value,
+                    // กลุ่มใหม่สลับ op จากแม่ (แม่ AND → ลูก OR) — เคสที่พบบ่อยสุด
+                    items: [...value.items, emptyGroup<F>(value.op === "and" ? "or" : "and")],
+                  })
+                }
+              >
+                <Plus />
+                {text.addGroup}
+              </Button>
+            )}
+          </div>
+        </div>
+        {value.items.length === 0 && (
+          <p className="text-muted-foreground text-xs">
+            {value.op === "and" ? text.emptyAnd : text.emptyOr}
+          </p>
+        )}
+        {value.items.map((item, i) => (
+          <div key={keyOf(item)} className="flex items-start gap-1" data-slot="rule-item">
+            <div className="min-w-0 flex-1">
+              <ConditionNode
+                value={item}
+                onChange={(next) =>
+                  onChange({ ...value, items: value.items.map((x, j) => (j === i ? next : x)) })
+                }
+                ctx={ctx}
+                depth={depth + 1}
+              />
+            </div>
+            <Button
+              type="button"
+              size="icon-xs"
+              variant="ghost"
+              aria-label={text.removeCondition}
+              disabled={disabled}
+              onClick={() => onChange({ ...value, items: value.items.filter((_, j) => j !== i) })}
+            >
+              <X />
+            </Button>
+          </div>
+        ))}
+      </div>
+    );
+  }
+  if (isRuleNot(value)) {
+    return (
+      <div
+        data-slot="rule-not"
+        className="flex flex-wrap items-start gap-2 rounded-lg border border-destructive/40 p-2"
+      >
+        <span className="shrink-0 rounded bg-destructive/10 px-1.5 py-0.5 text-destructive text-xs">
+          {text.not}
+        </span>
+        <div className="min-w-0 flex-1 basis-48">
+          <ConditionNode
+            value={value.item}
+            onChange={(next) => onChange({ op: "not", item: next })}
+            ctx={ctx}
+            depth={depth}
+          />
+        </div>
+        <Button
+          type="button"
+          size="xs"
+          variant="ghost"
+          disabled={disabled}
+          onClick={() => onChange(value.item)}
+        >
+          {text.removeNot}
+        </Button>
+      </div>
+    );
+  }
+  return <LeafRow leaf={value} onChange={onChange} ctx={ctx} />;
+}
+
+function LeafRow<F extends string>({
+  leaf,
+  onChange,
+  ctx,
+}: {
+  leaf: RuleLeaf<F>;
+  onChange: (next: RuleCondition<F>) => void;
+  ctx: Ctx<F>;
+}) {
+  const { fields, text, disabled } = ctx;
+  const def = fields.find((f) => f.key === leaf.field);
+  const showOperator = (def?.operators.length ?? 0) > 1;
+  // optgroup ตามลำดับที่พบครั้งแรก; ฟิลด์ไม่มี group อยู่บนสุด
+  const groups = new Map<string | undefined, RuleFieldDef<F>[]>();
+  for (const f of fields) {
+    const list = groups.get(f.group) ?? [];
+    list.push(f);
+    groups.set(f.group, list);
+  }
+  const option = (f: RuleFieldDef<F>) => (
+    <NativeSelectOption
+      key={f.key}
+      value={f.key}
+      disabled={Boolean(f.disabled) && f.key !== leaf.field}
+      title={typeof f.disabled === "string" ? f.disabled : undefined}
+    >
+      {f.label}
+    </NativeSelectOption>
+  );
+  return (
+    <div
+      data-slot="rule-leaf"
+      className={cn(
+        "grid gap-2 sm:items-center",
+        showOperator
+          ? "sm:grid-cols-[11rem_auto_minmax(0,1fr)_auto]"
+          : "sm:grid-cols-[11rem_minmax(0,1fr)_auto]",
+      )}
+    >
+      <NativeSelect
+        value={leaf.field}
+        disabled={disabled}
+        aria-label={text.field}
+        onChange={(e) => {
+          const next = fields.find((f) => f.key === e.target.value);
+          if (next) onChange(next.defaultLeaf());
+        }}
+      >
+        {!def && (
+          <NativeSelectOption value={leaf.field}>
+            {text.unknownField(leaf.field)}
+          </NativeSelectOption>
+        )}
+        {[...groups.entries()].map(([group, list]) =>
+          group === undefined ? (
+            list.map(option)
+          ) : (
+            <NativeSelectOptGroup key={group} label={group}>
+              {list.map(option)}
+            </NativeSelectOptGroup>
+          ),
+        )}
+      </NativeSelect>
+      {showOperator && def && (
+        <NativeSelect
+          value={leaf.operator}
+          disabled={disabled}
+          aria-label={text.operator}
+          onChange={(e) => onChange({ ...leaf, operator: e.target.value })}
+        >
+          {def.operators.map((o) => (
+            <NativeSelectOption key={o.value} value={o.value}>
+              {o.label}
+            </NativeSelectOption>
+          ))}
+        </NativeSelect>
+      )}
+      <div className="min-w-0">{def?.renderValue({ leaf, onChange, disabled })}</div>
+      {ctx.allowNot && (
+        <Button
+          type="button"
+          size="xs"
+          variant="ghost"
+          disabled={disabled}
+          aria-label={text.wrapNot}
+          onClick={() => onChange({ op: "not", item: leaf })}
+        >
+          {text.wrapNot}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/shared/ui-text.tsx

@@ -47,6 +47,8 @@ export interface UiText {
   signOut?: string;
   /** ThemeMenuItems: หัวกลุ่ม + ตัวเลือก (optional) */
   theme?: Partial<{ label: string; light: string; dark: string; system: string }>;
+  /** SectionNav: aria-label ของแถบแท็บย่อย (optional — "แท็บย่อย") */
+  sectionNav?: Partial<{ tabs: string }>;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -79,6 +81,7 @@ export const UI_TEXT_TH: UiText = {
   userMenu: "เมนูผู้ใช้",
   signOut: "ออกจากระบบ",
   theme: { label: "ธีม", light: "สว่าง", dark: "มืด", system: "ตามระบบ" },
+  sectionNav: { tabs: "แท็บย่อย" },
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -111,6 +114,7 @@ export const UI_TEXT_EN: UiText = {
   userMenu: "User menu",
   signOut: "Sign out",
   theme: { label: "Theme", light: "Light", dark: "Dark", system: "System" },
+  sectionNav: { tabs: "Section tabs" },
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/index.ts

@@ -112,6 +112,20 @@ export { type DecimalLike, FormattedNumber } from "./components/shared/number/fo
 export { PageHeader } from "./components/shared/page-header";
 export { PageSkeleton } from "./components/shared/page-skeleton";
 export { ProgressBar, type ProgressTone } from "./components/shared/progress-bar";
+export {
+  describeCondition,
+  emptyGroup,
+  isRuleGroup,
+  isRuleNot,
+  RuleBuilder,
+  type RuleBuilderProps,
+  type RuleBuilderText,
+  type RuleCondition,
+  type RuleFieldDef,
+  type RuleGroup,
+  type RuleLeaf,
+  type RuleNot,
+} from "./components/shared/rule-builder";
 export { SecretReveal } from "./components/shared/secret-reveal";
 export { SectionCard } from "./components/shared/section-card";
 export { SelectionButton } from "./components/shared/selection-button";

package/src/next.ts

@@ -15,6 +15,11 @@ export {
   PageBreadcrumb,
   type PageBreadcrumbItem,
 } from "./components/shared/navigation/page-breadcrumb";
+export {
+  SectionNav,
+  type SectionNavProps,
+  type SectionNavTab,
+} from "./components/shared/navigation/section-nav";
 export { Stepper, type StepperStep, type StepStatus } from "./components/shared/navigation/stepper";
 export { type RowAction, type RowActionItem, RowActions } from "./components/shared/row-actions";
 export { RowMenu, type RowMenuDialog, type RowMenuItem } from "./components/shared/row-menu";

package/src/styles.css

@@ -217,6 +217,19 @@ body,
   font-family: var(--font-sans);
 }
 
+/*
+ * CommandItem ที่ active (ลูกศร/hover) มองไม่ออก: shadcn ใช้ `data-selected:bg-muted` แต่ Tailwind `data-selected:`
+ * = `[data-selected]` (มีแอตทริบิวต์) ขณะที่ cmdk ใส่ `data-selected="false"` ให้รายการอื่นด้วย → ทุกแถวได้ bg-muted
+ * เท่ากัน (รายงานจาก Pi Done ใน dark mode) → เน้นเฉพาะ "true" โดยผสม foreground; override ที่นี่แบบไม่อยู่ใน layer
+ * จึงชนะ utility โดยไม่แก้ command.tsx ของ shadcn
+ */
+[data-slot="command-item"][data-selected="true"] {
+  background-color: color-mix(in oklch, var(--muted), var(--foreground) 8%);
+}
+.dark [data-slot="command-item"][data-selected="true"] {
+  background-color: color-mix(in oklch, var(--muted), var(--foreground) 14%);
+}
+
 /* ผู้ใช้ตั้ง "ลดการเคลื่อนไหว" → ตัด animation/transition ของทุก component (tw-animate, animate-spin, dialog zoom …) */
 @media (prefers-reduced-motion: reduce) {
   *,