@kahitsan/ksui 0.39.1 → 0.39.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.39.1",
+  "version": "0.39.3",
   "description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/composite/AccountRadioPicker.tsx

@@ -1,5 +1,6 @@
 import { createEffect, Show, For } from "solid-js";
 import AccountAvatar from "../base/AccountAvatar";
+import Button from "../base/Button";
 import type { PaymentAccountOption } from "./PaymentAccountPicker";
 
 export interface AccountRadioPickerProps {
@@ -9,6 +10,8 @@ export interface AccountRadioPickerProps {
   ariaLabel: string;
   excludeId?: string;
   autoDefault?: boolean;
+  compact?: boolean;
+  tone?: "income" | "expense" | "transfer";
 }
 
 export default function AccountRadioPicker(props: AccountRadioPickerProps) {
@@ -82,6 +85,7 @@ export default function AccountRadioPicker(props: AccountRadioPickerProps) {
         aria-label={props.ariaLabel}
         tabIndex={-1}
         class="grid max-sm:grid-cols-2 sm:grid-cols-3 gap-2"
+        classList={{ "ks-transaction-account-picker": props.compact }}
         onKeyDown={onKeyDown}
       >
         <For each={visible()}>
@@ -89,17 +93,29 @@ export default function AccountRadioPicker(props: AccountRadioPickerProps) {
             const selected = () => props.value === a.id.toString();
             const isTabStop = () => selected() || (!props.value && i() === 0);
             return (
-              <button
-                ref={(el) => (buttonRefs[i()] = el)}
+              <Button
+                ref={(el: HTMLButtonElement) => (buttonRefs[i()] = el)}
                 type="button"
                 role="radio"
                 aria-checked={selected()}
                 tabIndex={isTabStop() ? 0 : -1}
+                intent="secondary"
+                variant="clip1"
+                size="sm"
+                noGlow
+                noRipple
+                noScanline
                 onClick={() => props.onChange(a.id.toString())}
-                class="group flex items-center gap-2 rounded-lg border px-3 py-3 text-left text-sm transition-colors cursor-pointer ks-hud-clip-top-left-bottom-right"
+                class="group flex items-center gap-2 px-3 py-3 text-left text-sm transition-colors cursor-pointer"
                 classList={{
                   "border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_10%,transparent)] text-[var(--ks-accent-hover,#fcd34d)]":
-                    selected(),
+                    selected() && (!props.compact || !props.tone),
+                  "border-[color-mix(in_srgb,var(--ks-success,#10b981)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-success,#10b981)_10%,transparent)] text-[var(--ks-success-fg,#34d399)]":
+                    selected() && props.compact && props.tone === "income",
+                  "border-[color-mix(in_srgb,var(--ks-danger,#ef4444)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_10%,transparent)] text-[var(--ks-danger-fg,#f87171)]":
+                    selected() && props.compact && props.tone === "expense",
+                  "border-[color-mix(in_srgb,var(--ks-info,#38bdf8)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-info,#38bdf8)_10%,transparent)] text-[var(--ks-info,#38bdf8)]":
+                    selected() && props.compact && props.tone === "transfer",
                   "border-[var(--ks-border-strong,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_50%,transparent)] text-[var(--ks-fg-muted,#a1a1aa)] hover:border-[var(--ks-border-strong,#3f3f46)] hover:bg-[var(--ks-surface-raised,#1a1a1a)]":
                     !selected(),
                 }}
@@ -114,7 +130,7 @@ export default function AccountRadioPicker(props: AccountRadioPickerProps) {
                   }
                 />
                 <span class="truncate">{a.name}</span>
-              </button>
+              </Button>
             );
           }}
         </For>

package/src/components/composite/TransactionAccountFields.tsx

@@ -23,6 +23,7 @@ export interface TransactionAccountFieldsProps {
   transferFeeAmount: string;
   transferFeeEnabled: boolean;
   allowTransferFee: boolean;
+  compact?: boolean;
 }
 
 /**
@@ -43,6 +44,8 @@ export default function TransactionAccountFields(props: TransactionAccountFields
             value={
               props.category === "sale" ? props.destAccount : props.sourceAccount
             }
+            compact={props.compact}
+            tone={props.category === "sale" ? "income" : "expense"}
             onChange={(v) => {
               if (props.category === "sale") {
                 props.setDestAccount(v);

package/src/components/composite/TransactionForm.tsx

@@ -299,10 +299,35 @@ export interface TransactionFormProps {
 }
 
 export default function TransactionForm(props: TransactionFormProps) {
-  injectCSS("ksui-transaction-form-compact", `.ks-transaction-compact{min-height:0;font-family:var(--ks-font-body,"Inter", system-ui, sans-serif)}.ks-transaction-compact-body{display:flex;flex-direction:column;min-height:0;overflow:auto;padding:1rem 1.25rem 1.5rem;gap:1rem}.ks-transaction-compact-body>div{width:100%;flex:0 0 auto}.ks-transaction-compact-body input[data-testid="transactions-form-amount"]{min-height:3.5rem;text-align:center;font-size:2rem}.ks-transaction-compact-body input[data-testid="transactions-form-description"]{background:transparent;border-color:var(--ks-border)}.ks-transaction-compact-body>div:has(input[data-testid="transactions-form-amount"])>label,.ks-transaction-compact-body>div:has(input[data-testid="transactions-form-description"])>label{display:none}.ks-transaction-compact-body>div:has(button[aria-label="Today"])>label{font-size:0;text-transform:uppercase;letter-spacing:.12em}.ks-transaction-compact-body>div:has(button[aria-label="Today"])>label:after{content:"TRANSACTION DATE";font-size:10px}.ks-transaction-compact-body [role="radiogroup"]{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.ks-transaction-compact-body [role="radiogroup"]::-webkit-scrollbar{display:none}.ks-transaction-compact-body [role="radio"]{min-width:8rem}.ks-transaction-compact-footer{flex:0 0 auto}.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has(button[data-testid="form-payee-picker"]),.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has([data-testid="subcategory-select"]),.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has(textarea),.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has(button[aria-label="Add attachment"]){display:none}
-.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-secondary{display:none;}
-.ks-transaction-compact .ks-transaction-compact-body{display:flex;flex-direction:column;min-height:0;overflow:auto;}
-`);
+  injectCSS(
+    "ksui-transaction-form-compact",
+    `.ks-transaction-compact{display:flex;flex-direction:column;min-height:0;height:100%;font-family:var(--ks-font-body,"Inter", system-ui, sans-serif)}
+.ks-transaction-compact form{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
+.ks-transaction-compact-type-switcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem;margin:0 1.25rem .25rem;padding:.375rem;border-radius:.75rem;background:color-mix(in srgb,var(--ks-fg,#ffffff) 5%,transparent)}
+.ks-transaction-compact-type-switcher>button{min-height:2.25rem;border:0;border-radius:.5rem;padding:.5rem .25rem}
+.ks-transaction-compact-type-switcher>button.ks-transaction-type-active{background:color-mix(in srgb,var(--ks-primary,#c9a961) 16%,transparent);color:var(--ks-primary,#c9a961)}
+.ks-transaction-compact-body{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;width:100%!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;padding:1rem 1.25rem 1.5rem!important;gap:1rem}
+.ks-transaction-compact-body>div{width:100%!important;flex:0 0 auto!important}
+.ks-transaction-compact-footer{flex:0 0 auto!important}
+.ks-transaction-compact-body>.ks-transaction-compact-amount{order:2;padding:0;background:transparent}
+.ks-transaction-compact-body>.ks-transaction-compact-description{order:3}
+.ks-transaction-compact-body>.ks-transaction-compact-date{order:4;padding:.75rem;border:1px solid color-mix(in srgb,var(--ks-border,rgba(39,39,42,0.5)) 70%,transparent);border-radius:.75rem;background:color-mix(in srgb,var(--ks-overlay,rgba(0,0,0,0.7)) 78%,transparent)}
+.ks-transaction-compact-body>.ks-transaction-compact-account{order:5}
+.ks-transaction-compact-body>.ks-transaction-compact-details-toggle{order:6;display:flex;align-items:center;gap:.75rem;width:100%;padding:.25rem 0;color:var(--ks-fg-subtle,#71717a)}
+.ks-transaction-compact-body>button:before,.ks-transaction-compact-body>button:after{content:"";height:1px;flex:1;background:color-mix(in srgb,var(--ks-fg,#ffffff) 8%,transparent)}
+.ks-transaction-compact-body>div:has(input[data-testid="transactions-form-amount"])>label,.ks-transaction-compact-body>div:has(input[data-testid="transactions-form-description"])>label{display:none}
+.ks-transaction-compact-body input,.ks-transaction-compact-body select,.ks-transaction-compact-body textarea{border-radius:.625rem}
+.ks-transaction-compact-body input[data-testid="transactions-form-amount"]{height:4rem;font-family:var(--ks-font-mono,ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace);font-size:3.25rem;line-height:1;text-align:center}
+.ks-transaction-compact-body input[data-testid="transactions-form-description"]{background:transparent;border-color:var(--ks-border)}
+.ks-transaction-compact-body>div:has(button[aria-label="Today"])>label{font-size:10px;display:flex;align-items:center;gap:.5rem;color:color-mix(in srgb,var(--ks-fg,#ffffff) 35%,transparent);text-transform:uppercase;letter-spacing:.12em}
+.ks-transaction-compact-body>div:has(button[aria-label="Today"])>label:before{content:"◷";font-size:15px;color:var(--ks-fg-muted,#a1a1aa)}
+.ks-transaction-compact-body [role="radiogroup"]{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
+.ks-transaction-compact-body [role="radiogroup"]::-webkit-scrollbar{display:none}
+.ks-transaction-compact-body [role="radio"]{min-width:8rem}
+.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has([data-testid="form-payee-picker-trigger"]),.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has([data-testid="subcategory-select"]),.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has(textarea),.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has([data-testid="mention-textarea"]),.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has(button[aria-label="Add attachment"]){display:none}
+.ks-transaction-compact-footer>div:last-child>button{min-height:2.75rem}
+`,
+  );
   const compact = () => props.layout === "compact";
   const catConfig = () =>
     CATEGORY_FORM[props.category] || CATEGORY_FORM.expense;
@@ -446,6 +471,39 @@ export default function TransactionForm(props: TransactionFormProps) {
         </div>
       </Show>
 
+      <Show when={compact() && !props.simpleMode}>
+        <div class="ks-transaction-compact-type-switcher" role="tablist" aria-label="Transaction type">
+          <For each={categoryOptions()}>
+            {(cat) => (
+              <Button
+                type="button"
+                role="tab"
+                aria-selected={props.category === cat}
+                data-testid={`transactions-form-category-${cat}`}
+                intent="secondary"
+                variant="ghost"
+                size="sm"
+                noGlow
+                noRipple
+                noScanline
+                class={`ks-transaction-type-button ks-transaction-type-${cat}`}
+                classList={{ "ks-transaction-type-active": props.category === cat }}
+                onClick={() => {
+                  props.setCategory(cat);
+                  props.setSourceAccount("");
+                  props.setDestAccount("");
+                  if (cat !== "business") {
+                    props.setTransferFeeEnabled(false);
+                    props.setTransferFeeAmount("");
+                  }
+                }}
+              >
+                {CATEGORY_FORM[cat].label}
+              </Button>
+            )}
+          </For>
+        </div>
+      </Show>
       <Show when={cameraOpen()}>
         <CameraCapture
           onCapture={(file) => {
@@ -474,56 +532,6 @@ export default function TransactionForm(props: TransactionFormProps) {
             </div>
           </Show>
 
-          <Show when={!props.simpleMode}>
-            <div>
-              <div class="text-[10px] uppercase tracking-widest text-[var(--ks-fg-subtle,#71717a)] font-semibold mb-2">
-                Type
-              </div>
-              <div
-                class="grid gap-2"
-                classList={{
-                  "grid-cols-3": categoryOptions().length === 3,
-                  "grid-cols-4": categoryOptions().length === 4,
-                }}
-              >
-                <For each={categoryOptions()}>
-                  {(cat) => {
-                    const cfg = CATEGORY_FORM[cat];
-                    const tone = CATEGORY_TONE[cat];
-                    const tc = TONE_CLASSES[tone.tone];
-                    const Ico = tone.icon;
-                    return (
-                      <button
-                        type="button"
-                        data-testid={`transactions-form-category-${cat}`}
-                        onClick={() => {
-                          props.setCategory(cat);
-                          props.setSourceAccount("");
-                          props.setDestAccount("");
-                          if (cat !== "business") {
-                            props.setTransferFeeEnabled(false);
-                            props.setTransferFeeAmount("");
-                          }
-                        }}
-                        class="flex min-h-[42px] items-center justify-center gap-2 px-3 py-2 border text-sm transition-colors ks-hud-clip-button cursor-pointer active:opacity-80"
-                        classList={{
-                          [`${tc.bg} ${tc.border} ${tc.text}`]:
-                            props.category === cat,
-                          "border-[var(--ks-border,rgba(39,39,42,0.5))] bg-transparent text-[var(--ks-fg-subtle,#71717a)] hover:border-[var(--ks-input-border,#3f3f46)] hover:text-[var(--ks-fg,#ffffff)]":
-                            props.category !== cat,
-                        }}
-                      >
-                        <Ico size={16} />
-                        <span class="font-medium">{cfg.label}</span>
-                      </button>
-                    );
-                  }}
-                </For>
-              </div>
-              <p class="text-[11px] text-[var(--ks-fg-subtle,#71717a)] mt-2">{catConfig().hint}</p>
-            </div>
-          </Show>
-
           <Show when={props.category === "sale"}>
             <SalesBodyEditor
               items={props.saleItems}
@@ -540,6 +548,7 @@ export default function TransactionForm(props: TransactionFormProps) {
           <Show
             when={!(props.category === "sale" && props.saleItems.length > 0)}
           >
+            <div class={compact() ? "ks-transaction-compact-amount" : undefined}>
             <FormField label={compact() ? "" : "Amount *"}>
               <div class="flex items-stretch gap-2 px-4 py-3 border bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] ks-hud-clip-button focus-within:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)] transition-colors">
                 <span class="self-center text-3xl font-bold text-[var(--ks-fg-subtle,#71717a)] tabular-nums">
@@ -570,6 +579,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                 </Show>
               </div>
             </FormField>
+            </div>
             <Show
               when={
                 props.category === "business" &&
@@ -607,6 +617,7 @@ export default function TransactionForm(props: TransactionFormProps) {
             </Show>
           </Show>
 
+          <div class={compact() ? "ks-transaction-compact-date" : undefined}>
           <FormField label={compact() ? "TRANSACTION DATE" : "Date *"}>
             <DatePicker
               value={props.date}
@@ -619,6 +630,7 @@ export default function TransactionForm(props: TransactionFormProps) {
               </p>
             </Show>
           </FormField>
+          </div>
 
           <Show when={props.isBackdated}>
             <div class="rounded-lg border border-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_20%,transparent)] bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_5%,transparent)] px-3 py-2">
@@ -638,6 +650,7 @@ export default function TransactionForm(props: TransactionFormProps) {
             </div>
           </Show>
 
+          <div class={compact() ? "ks-transaction-compact-description" : undefined}>
           <FormField label={compact() ? "" : "Description *"}>
             <input
               type="text"
@@ -649,9 +662,10 @@ export default function TransactionForm(props: TransactionFormProps) {
               required
             />
           </FormField>
+          </div>
 
           <Show when={catConfig().showPayee}>
-            <div class="grid grid-cols-2 gap-4" classList={{ "ks-transaction-compact-secondary": compact() }}>
+            <div class="grid grid-cols-2 gap-4">
               <FormField label={catConfig().payeeLabel!}>
                 <ComboBox<PayeeOption>
                   testIdPrefix="form-payee-picker"
@@ -699,8 +713,7 @@ export default function TransactionForm(props: TransactionFormProps) {
             </div>
           </Show>
           <Show when={!catConfig().showPayee}>
-            <div classList={{ "ks-transaction-compact-secondary": compact() }}>
-              <FormField label="Reference #">
+            <FormField label="Reference #">
               <input
                 type="text"
                 value={props.refNumber}
@@ -708,13 +721,11 @@ export default function TransactionForm(props: TransactionFormProps) {
                 class="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)]"
                 placeholder="Reference number (optional)"
               />
-              </FormField>
-            </div>
+            </FormField>
           </Show>
 
           <Show when={subcategoryAppliesTo() !== null}>
-            <div classList={{ "ks-transaction-compact-secondary": compact() }}>
-              <FormField label="Category">
+            <FormField label="Category">
               <Show
                 when={subcategoryOptionsReady()}
                 fallback={
@@ -760,13 +771,11 @@ export default function TransactionForm(props: TransactionFormProps) {
               <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-0.5">
                 Optional. Used for tax-prep classification.
               </p>
-              </FormField>
-            </div>
+            </FormField>
           </Show>
 
           <Show when={props.category === "payable"}>
-            <div classList={{ "ks-transaction-compact-secondary": compact() }}>
-              <TransactionPayableFields
+            <TransactionPayableFields
               payableKind={props.payableKind}
               setPayableKind={props.setPayableKind}
               dueDate={props.dueDate}
@@ -775,10 +784,10 @@ export default function TransactionForm(props: TransactionFormProps) {
               setChequeNumber={props.setChequeNumber}
               pdcStatus={props.pdcStatus}
               setPdcStatus={props.setPdcStatus}
-              />
-            </div>
+            />
           </Show>
 
+          <div class={compact() ? "ks-transaction-compact-account" : undefined}>
           <TransactionAccountFields
             category={props.category}
             accounts={props.accounts}
@@ -794,9 +803,10 @@ export default function TransactionForm(props: TransactionFormProps) {
             transferFeeAmount={props.transferFeeAmount}
             transferFeeEnabled={props.transferFeeEnabled}
             allowTransferFee={props.allowTransferFee}
+            compact={compact()}
           />
+          </div>
 
-          <div classList={{ "ks-transaction-compact-secondary": compact() }}>
           <FormField label="Notes">
             <MentionTextarea
               value={props.notes}
@@ -807,7 +817,6 @@ export default function TransactionForm(props: TransactionFormProps) {
               ariaLabel="Notes"
             />
           </FormField>
-          </div>
 
           <div>
             <div class="flex items-center gap-1 mb-2 text-xs text-[var(--ks-fg-subtle,#71717a)]">
@@ -908,7 +917,7 @@ export default function TransactionForm(props: TransactionFormProps) {
           </div>
 
           <Show when={!props.simpleMode}>
-            <div class="flex justify-center pt-2">
+            <div class="flex justify-center pt-2" classList={{ "ks-transaction-compact-details-toggle": compact() }}>
               <button
                 type="button"
                 onClick={() =>

package/src/components/composite/VoucherPicker.test.tsx

@@ -37,6 +37,7 @@ function voucher(over: Partial<VoucherOption> & Pick<VoucherOption, "id" | "code
     value: 20,
     max_discount_amount: null,
     applicable_packages: null,
+    applicable_package_lineages: null,
     minimum_purchase: 0,
     valid_from: null,
     valid_until: null,
@@ -379,6 +380,52 @@ describe("VoucherPicker dialog", () => {
     );
   });
 
+  it("accepts a voucher when each package matches by aligned lineage", async () => {
+    mockPagedFetch([
+      voucher({
+        id: 35,
+        code: "LINEAGEOK",
+        applicable_packages: [99],
+        applicable_package_lineages: ["day-pass"],
+      }),
+    ]);
+    const { getByTestId } = render(() => (
+      <VoucherPicker
+        selected={null}
+        onChange={vi.fn()}
+        subtotal={1000}
+        packageIds={[1]}
+        packageLineages={["day-pass"]}
+      />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() => expect(getByTestId("voucher-picker-result-35")).toBeTruthy());
+  });
+  it("rejects a voucher when aligned package lineage does not match", async () => {
+    mockPagedFetch([
+      voucher({
+        id: 36,
+        code: "LINEAGEBAD",
+        applicable_packages: [99],
+        applicable_package_lineages: ["day-pass"],
+      }),
+    ]);
+    const { getByTestId, queryByTestId } = render(() => (
+      <VoucherPicker
+        selected={null}
+        onChange={vi.fn()}
+        subtotal={1000}
+        packageIds={[1]}
+        packageLineages={["single-use"]}
+      />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() => expect(getByTestId("voucher-picker-inapplicable-36")).toBeTruthy());
+    expect(queryByTestId("voucher-picker-result-36")).toBeNull();
+    expect(getByTestId("voucher-picker-inapplicable-36").textContent).toContain(
+      "Doesn't cover every item",
+    );
+  });
   it("surfaces a load failure instead of rendering an empty list", async () => {
     vi.stubGlobal(
       "fetch",

package/src/components/composite/VoucherPicker.tsx

@@ -23,6 +23,7 @@ export interface VoucherOption {
   value: string | number | null;
   max_discount_amount: string | number | null;
   applicable_packages: number[] | null;
+  applicable_package_lineages?: string[] | null;
   minimum_purchase: string | number;
   valid_from: string | null;
   valid_until: string | null;
@@ -42,6 +43,7 @@ interface VoucherPickerProps {
   onChange: (next: VoucherOption | null) => void;
   subtotal: number;
   packageIds: number[];
+  packageLineages?: (string | null)[];
   disabled?: boolean;
   compact?: boolean;
   /** Same-shape endpoint override (defaults to the vouchers plugin's own API) —
@@ -104,6 +106,7 @@ function ineligibilityReason(
   voucher: VoucherOption,
   subtotal: number,
   packageIds: number[],
+  packageLineages: (string | null)[],
   todayIso: string,
 ): string | null {
   if (!voucher.is_active) return "Inactive";
@@ -116,10 +119,17 @@ function ineligibilityReason(
   if (usageExhausted(voucher)) return "Fully redeemed";
   if (asNumber(voucher.minimum_purchase) > subtotal)
     return `Needs ${formatCurrency(asNumber(voucher.minimum_purchase))} minimum`;
-  if (voucher.applicable_packages && voucher.applicable_packages.length > 0) {
+  const allowedIds = voucher.applicable_packages ?? [];
+  const allowedLineages = voucher.applicable_package_lineages ?? [];
+  if (allowedIds.length > 0 || allowedLineages.length > 0) {
     if (packageIds.length === 0) return "Only for specific items";
-    const allowed = new Set(voucher.applicable_packages);
-    if (!packageIds.every((id) => allowed.has(id))) return "Doesn't cover every item";
+    const allowed = new Set(allowedIds);
+    if (packageIds.some((id, index) =>
+      !allowed.has(id) &&
+      !(packageLineages[index] != null && allowedLineages.includes(packageLineages[index]!))
+    )) {
+      return "Doesn't cover every item";
+    }
   }
   return null;
 }
@@ -129,9 +139,10 @@ function isApplicable(
   voucher: VoucherOption,
   subtotal: number,
   packageIds: number[],
+  packageLineages: (string | null)[],
   todayIso: string,
 ): boolean {
-  return ineligibilityReason(voucher, subtotal, packageIds, todayIso) === null;
+  return ineligibilityReason(voucher, subtotal, packageIds, packageLineages, todayIso) === null;
 }
 
 function formatVoucherDescription(v: VoucherOption): string {
@@ -293,16 +304,16 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
 
   const applicable = createMemo(() => {
     const today_ = today();
-    return vouchers().filter((v) => isApplicable(v, props.subtotal, props.packageIds, today_));
+    return vouchers().filter((v) => isApplicable(v, props.subtotal, props.packageIds, props.packageLineages ?? [], today_));
   });
 
   const inapplicable = createMemo(() => {
     const today_ = today();
     return vouchers()
-      .filter((v) => !isApplicable(v, props.subtotal, props.packageIds, today_))
+      .filter((v) => !isApplicable(v, props.subtotal, props.packageIds, props.packageLineages ?? [], today_))
       .map((v) => ({
         voucher: v,
-        reason: ineligibilityReason(v, props.subtotal, props.packageIds, today_) ?? "",
+        reason: ineligibilityReason(v, props.subtotal, props.packageIds, props.packageLineages ?? [], today_) ?? "",
       }));
   });