@apliteni/apliteni-ui 0.132.0 → 0.136.0

package/guidelines/file-drop.md

@@ -6,13 +6,13 @@
 
 **Rule:** At rest, a file drop is one row: the button that opens the picker and the accepted types beside it.
 
-**Why:** A tall box holds the page's best space open for a file that arrives once a month.
+**Why:** A tall box holds the page's best space for a file that arrives once a month.
 
 **Do:** Put an Upload button and “PDF or CSV, up to 10 MB” on one line above the list they feed.
 
 **Don't:** Draw a tall dashed box with a glyph, an invitation and a button stacked inside it.
 
-**Except:** A page whose whole purpose is receiving one file may use the field-sized picker, which carries a label of its own.
+**Except:** A page that exists to receive one file may use the field-sized picker, which has its own label. An empty page may show a dashed drop area until the first file arrives. See #458 for this exception.
 
 ## Paint the target only while a file is over it
 
@@ -26,15 +26,17 @@
 
 **Don't:** Cover the whole window when one panel accepts the file.
 
+**Except:** A page that takes files anywhere may cover the whole page, slightly transparent and blurred over a table. See #458 for this exception.
+
 ## Keep the file in the row it arrived in
 
 <!-- rule: in-the-row -->
 
 **Rule:** After the drop, the file's name, size and progress take the place the button was in, with remove on the name's line.
 
-**Why:** A row that changes in place keeps the page still while the file uploads.
+**Why:** A row that changes in place keeps the page still during the upload.
 
-**Do:** Give the name a line with remove at its end, put the size under it, and run the progress track the full width below both.
+**Do:** Put remove at the end of the name's line, the size under it, and the progress track below both.
 
 **Don't:** Push the list down with a progress card, or open a dialog over the page.
 
@@ -44,7 +46,7 @@
 
 **Rule:** A refused file keeps its place, says what it did wrong under its name, and offers Retry beside Remove.
 
-**Why:** A row that drops the file sends the reader back to choosing one. The reason is the one string here that has to be read in full, so it gets a line rather than a share of one.
+**Why:** A row that drops the file sends the reader back to choosing one.
 
 **Do:** Keep the name on its line and say “Larger than 10 MB” under it, with Retry.
 
@@ -80,8 +82,8 @@
 
 **Rule:** Use a row where the file joins a list on the page, a region when one panel owns the file, and a dialog only when the upload needs answers of its own.
 
-**Why:** A dialog that asks nothing is one more thing to dismiss. The rule picks between three containers, so a drawing would show one of them and not the choice.
+**Why:** A dialog that asks nothing is one more thing to dismiss. A drawing would show one container, not the choice.
 
-**Do:** Take a statement into the row under the statements it joins, and a replacement logo into the panel that shows it.
+**Do:** Take a statement into the row under the statements it joins.
 
 **Don't:** Open a dialog for one file that the row behind it could have taken.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.132.0",
+  "version": "0.136.0",
 
   "workspaces": [
     "react"

package/react/README.md

@@ -32,7 +32,10 @@ import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 Both stylesheets. The React one adds what React's own components need — it carries no tokens, no
 reset and none of the kit's control CSS, so it cannot stand in for the first import.
 
-Components: `Success`, `SuccessPanel`, `SuccessCheck`, `Checkbox`, `Switch`, `SearchField`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Chart`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Segmented`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
+Components: `Success`, `SuccessPanel`, `SuccessCheck`, `Checkbox`, `Switch`, `SearchField`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Chart`, `Modal`, `Confirm`, `Feedback`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Segmented`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
+
+`Card` accepts `title`, `sub`, children, `level`, `variant`, `pad`, `icon`, `href`, and `className`. `variant` is `accent` or `live`; omit it for the default surface. `pad` is `sm` or `lg`. A title is a heading unless `href` makes the whole card a link. Compose setting rows with `ui-card__row` and kit controls.
+Three-option setting rows use `ui-card__row--tight-choice` to narrow pills below 360 px and stay on one line, while other rows keep full tap width.
 
 `Segmented` is a controlled choice toolbar: pass `options`, `value`, `onChange`,
 and a `label` for its accessible name. `size="sm"` compacts it, `block` makes it
@@ -447,6 +450,30 @@ and described by its body. Modal also accepts
 `initialFocusRef` for a mounted, focusable element inside its panel. Without it, Modal
 uses its normal opening focus.
 
+## Feedback
+
+`Feedback` lets a reader select a passage and send a note about it. Pass `container`, a ref to
+the element whose text can be selected, and `onSend`. A "Give feedback" pill appears above a
+selection of `minChars` (3) or more. The pill opens a form with a chip for the nearest heading,
+the quoted passage, a note field, Cancel and Send. The quoted passage stays highlighted until the
+form closes. The container may mount after `Feedback`. On close, focus returns to the visible
+control that had it before opening. If that control is gone, hidden, or disabled, focus returns to the pill.
+
+```tsx
+<Feedback container={articleRef}
+  onSend={async ({ note, excerpt, anchor }) => ({ ok: await file(note, excerpt, anchor) })} />
+```
+
+`onSend` receives `note`, `excerpt`, `anchor`, `sectionLabel` and `sectionTitle`. Resolve
+`{ ok: true }` when the note is filed. Resolve `{ ok: false, error }`, or throw, to keep the form
+open with the note intact and the error shown in place. `section` reshapes the chip and the
+payload from the heading. Send stays off until the note has text and shows progress while the
+request runs.
+
+A sent note shows one line, `sentMessage`, and a Close button. Cancel, Escape, the close button
+and the scrim dismiss the form without sending. `Feedback` uses the shared dialog stack and the
+kit's buttons.
+
 ## Timeline
 
 `Timeline` displays a record’s events in the order provided. Pass events from oldest
@@ -817,6 +844,24 @@ the trigger's trailing edge. Without `ariaLabel` the trigger's own text is its a
 name, so a control reading "17 September 2026" is heard as that rather than as its
 placeholder. The popover stays mounted while closed, and is `inert` while it is.
 
+## Footer
+
+`Footer` draws the kit's `full`, `slim` and `app` versions. The full version takes
+brand text, a tagline, social links and link columns. The columns sit side by side
+on an iPad or desktop and stack on a phone. Supply legal text and links for every
+version. Pass `AccentPicker` and `ThemeToggle` through `switcher` when needed.
+
+```tsx
+<Footer variant="full" tagline="A short product line"
+  columns={[{ title: 'Product', links: [{ label: 'Overview', href: '/overview' }] }]}
+  legal="© 2026 Example" switcher={<ThemeToggle />} />
+```
+
+Use `brand` to replace the lockup with React content. Set `brand={false}` to hide
+the brand block. Use `links` for React link columns in place of `columns`.
+Use `legal` for text or React content. The component uses the kit's footer classes
+and stylesheet.
+
 ## AccentPicker
 
 `AccentPicker` is a controlled group of the kit’s four accent swatches. Pass `value`

package/react/dist/index.css

@@ -847,6 +847,43 @@
 .ui-drop.is-disabled .ui-drop__name {
   color: var(--disabled-ink);
 }
+.ui-drop--area {
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+}
+.ui-drop--area.is-dragging {
+  border-color: var(--accent);
+}
+@media (max-width: 560px) {
+  .ui-drop--area {
+    padding: var(--space-3);
+  }
+}
+.ui-drop--page {
+  position: fixed;
+  inset: calc(var(--ui-app-band, 0px) + var(--ui-app-top, 0px) + var(--space-4)) var(--space-4) var(--space-4);
+  z-index: var(--z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  background: var(--bg);
+}
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  .ui-drop--page {
+    background: color-mix(in srgb, var(--bg) 80%, transparent);
+    -webkit-backdrop-filter: blur(var(--space-2));
+    backdrop-filter: blur(var(--space-2));
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .ui-drop--page {
+    background: var(--bg);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
 
 /* src/Toast.css */
 .rx-toast-stack {
@@ -907,6 +944,9 @@
     gap: var(--space-1);
     padding-inline: var(--space-2);
   }
+  .ui-react-app .ui-app__bar:not(:has(> .ui-app__menu:first-child)) {
+    padding-inline-start: var(--space-4);
+  }
   .ui-react-app .ui-app__bar-gap {
     display: none;
   }

package/react/dist/index.d.ts

@@ -96,13 +96,22 @@ declare const StatusDot: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTM
 } & react.RefAttributes<HTMLSpanElement>>;
 
 type Level = 2 | 3 | 4 | 5 | 6;
-declare function Card({ title, sub, level, className, children }: {
+type CardProps = {
     title?: ReactNode;
     sub?: ReactNode;
     level?: Level;
+    /** `accent` tints the card with the accent and `live` with green. */
+    variant?: 'accent' | 'live';
+    /** `sm` trims the vertical padding. `lg` is the centred landing card. */
+    pad?: 'sm' | 'lg';
+    /** Glyph name for the chip before the title. Needs a `title`. */
+    icon?: string;
+    /** Makes the whole card a link. Its title is then a plain block, because a link holds no heading. */
+    href?: string;
     className?: string;
     children?: ReactNode;
-}): react.JSX.Element;
+};
+declare function Card({ title, sub, level, variant, pad, icon, href, className, children }: CardProps): react.JSX.Element;
 
 type CalloutVariant = 'neutral' | 'info' | 'success' | 'warn' | 'danger';
 interface CalloutProps {
@@ -156,6 +165,38 @@ type ConfirmProps = {
 };
 declare function Confirm({ open, title, body, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, }: ConfirmProps): react.JSX.Element;
 
+type FeedbackPayload = {
+    note: string;
+    excerpt: string;
+    anchor: string;
+    sectionLabel: string;
+    sectionTitle: string;
+};
+type FeedbackResult = {
+    ok: boolean;
+    error?: string;
+};
+type FeedbackSection = {
+    label?: string;
+    title?: string;
+    anchor?: string;
+};
+type FeedbackProps = {
+    /** The element whose text a reader may select. Pass a ref to it. */
+    container: RefObject<HTMLElement | null>;
+    /** Files the note. Resolve `{ ok: true }` when it is sent, or `{ ok: false, error }` to keep the form open with the error in place. */
+    onSend: (payload: FeedbackPayload) => Promise<FeedbackResult>;
+    /** Shortest selection that offers the pill. */
+    minChars?: number;
+    /** Shapes the chip and the payload from the heading above the selection. */
+    section?: (heading: Element | null) => FeedbackSection;
+    label?: string;
+    placeholder?: string;
+    /** The one line shown once the note is sent. */
+    sentMessage?: string;
+};
+declare function Feedback({ container, onSend, minChars, section, label, placeholder, sentMessage, }: FeedbackProps): react.ReactPortal;
+
 type ModalProps = {
     open: boolean;
     title: string;
@@ -759,6 +800,12 @@ type FileDropProps = {
     label?: string;
     /** The accepted types and the size limit, stated once beside the button. */
     note?: string;
+    /** Makes the drop an empty page's area: a dashed box around a first-run block with this title,
+     *  the note and the button. The block stands in for the row and `children`, and the page
+     *  leaves the area when the first file arrives, so it never shows a file in hand. */
+    title?: string;
+    /** Lets the picker take several files. */
+    multiple?: boolean;
     /** Filters the system picker only; the consumer still validates the file. */
     accept?: string;
     /** The words on the drop target. */
@@ -771,14 +818,17 @@ type FileDropProps = {
     /** Drives the target from a parent that owns the drag region. */
     dragging?: boolean;
     disabled?: boolean;
+    /** The first file chosen or dropped. */
     onFile?: (file: File) => void;
+    /** Every file chosen or dropped, together. A consumer may pass both props. */
+    onFiles?: (files: File[]) => void;
     onRemove?: () => void;
     onRetry?: () => void;
     /** What the region accepts the file for; the target covers it while dragging. */
     children?: ReactNode;
     className?: string;
 };
-declare function FileDrop({ label, note, accept, dropLabel, removeLabel, retryLabel, file, dragging, disabled, onFile, onRemove, onRetry, children, className, }: FileDropProps): react.JSX.Element;
+declare function FileDrop({ label, note, title, multiple, accept, dropLabel, removeLabel, retryLabel, file, dragging, disabled, onFile, onFiles, onRemove, onRetry, children, className, }: FileDropProps): react.JSX.Element;
 
 type SearchFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'aria-label'> & {
     /** The control's name. A toolbar search box shows no label, so this is the
@@ -861,6 +911,42 @@ type AppShellProps = {
 };
 declare function AppShell({ sections, pathname, title, children, word, brand, brandHref, width, back, lede, actions, bandControl, account, onSignOut, searchLabel, searchShortLabel, defaultCollapsed, palette, renderLink }: AppShellProps): react.JSX.Element;
 
+type FooterLink = {
+    label: string;
+    href?: string;
+    target?: string;
+};
+type FooterColumn = {
+    title?: string;
+    links: FooterLink[];
+};
+type FooterSocial = {
+    label: string;
+    href?: string;
+    icon?: 'github' | 'x' | 'linkedin' | 'mail';
+};
+type FooterProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** `full` is the marketing footer, `slim` a single legal row, `app` the in-product row. */
+    variant?: 'full' | 'slim' | 'app';
+    /** Product word beside the mark. Default `Strategy`. */
+    word?: string;
+    brandHref?: string;
+    /** Replaces the lockup. `false` hides the whole brand block: lockup, tagline and social links. Full variant only. */
+    brand?: ReactNode | false;
+    /** Short line under the brand. Full variant only. */
+    tagline?: string;
+    /** Link columns. Side by side above the phone step, stacked on a phone. Full variant only. */
+    columns?: FooterColumn[];
+    /** Contents of the link navigation. Takes the place of `columns`. Full variant only. */
+    links?: ReactNode;
+    social?: FooterSocial[];
+    legal?: ReactNode;
+    legalLinks?: FooterLink[];
+    /** Slot for `<AccentPicker>` and `<ThemeToggle>`. */
+    switcher?: ReactNode;
+};
+declare function Footer({ variant, word, brandHref, brand, tagline, columns, links, social, legal, legalLinks, switcher, className, ...rest }: FooterProps): react.JSX.Element;
+
 type EmptyStateVariant = 'first-run' | 'no-matches' | 'not-found' | 'not-yet-built';
 type EmptyStateProps = {
     variant?: EmptyStateVariant;
@@ -1148,4 +1234,4 @@ declare const Breadcrumbs: react.ForwardRefExoticComponent<Omit<Omit<react.Detai
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { type Accent, AccentPicker, type AccentPickerProps, type AddFilter, AppShell, type AppShellProps, type AppShellSection, Avatar, type AvatarProps, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Chart, type ChartBridgeStep, type ChartBridgeTones, type ChartPeriod, type ChartProps, type ChartSeries, type ChartTone, CheckList, type CheckListProps, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownAvatar, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, type NavTabBadge, type NavTabItem, NavTabs, type NavTabsProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };
+export { type Accent, AccentPicker, type AccentPickerProps, type AddFilter, AppShell, type AppShellProps, type AppShellSection, Avatar, type AvatarProps, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Chart, type ChartBridgeStep, type ChartBridgeTones, type ChartPeriod, type ChartProps, type ChartSeries, type ChartTone, CheckList, type CheckListProps, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownAvatar, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Feedback, type FeedbackPayload, type FeedbackProps, type FeedbackResult, type FeedbackSection, Field, type FieldControlProps, type FieldProps, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Footer, type FooterColumn, type FooterLink, type FooterProps, type FooterSocial, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, type NavTabBadge, type NavTabItem, NavTabs, type NavTabsProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };