@k2b/ui 0.19.0 → 0.21.0

package/dist/types/actions/GestureMenu.d.ts

@@ -0,0 +1,37 @@
+import { type JSX } from "solid-js";
+import { type DropdownAction, type DropdownActionBase, type DropdownChoice, type DropdownSection } from "./Dropdown";
+export type GestureKind = "swipe-right" | "swipe-left" | "double-tap";
+/** A menu action that a gesture runs as well. */
+export type GestureMenuAction = DropdownActionBase & {
+    action: () => void;
+    /** The gesture that runs this action. Give each gesture to at most one item; a disabled item disables its gesture. */
+    gesture?: GestureKind;
+};
+export type GestureMenuSection = Omit<DropdownSection, "items"> & {
+    items: readonly (GestureMenuAction | DropdownAction | DropdownChoice)[];
+};
+export type GestureMenuItem = GestureMenuAction | DropdownAction | DropdownChoice | GestureMenuSection;
+export type GestureMenuProps = {
+    /**
+     * The menu. A long press opens it as a bottom sheet, a right-click, the Context Menu key, or Shift+F10 as a menu.
+     * An item with `gesture` is also run by that gesture, so every gesture has its entry here.
+     */
+    items: readonly GestureMenuItem[];
+    /** Names the element and its menu, for example "Message from Nora, 10:42". */
+    label: string;
+    children: JSX.Element;
+    /** Shown above the menu in the long-press sheet, for example a row of quick reactions. `close` closes the sheet. */
+    sheetTop?: (close: () => void) => JSX.Element;
+    /** Tab order of the element. A list that moves focus between its rows itself passes -1. */
+    tabIndex?: number;
+    /** Runs before the menu or the sheet shows its items, for example to select what was pressed. */
+    onOpen?: () => void;
+    class?: string;
+};
+/**
+ * Touch gestures for an element, each the shortcut of an entry in its menu: a horizontal swipe, a double tap, and a
+ * long press that opens the whole menu as a `BottomSheet`. A mouse double-click runs the double-tap action; a
+ * right-click and the keyboard open the menu beside the element. Vertical scrolling never turns into a swipe.
+ */
+export declare function GestureMenu(props: GestureMenuProps): JSX.Element;
+export default GestureMenu;

package/dist/types/actions/index.d.ts

@@ -10,6 +10,8 @@ export type { DropdownAction, DropdownActionBase, DropdownChoice, DropdownItemPr
 export { Dropdown, DropdownItem, dropdownPosition } from "./Dropdown";
 export type { FilterChipOption, FilterChipProps, FilterChipSection } from "./FilterChip";
 export { FilterChip } from "./FilterChip";
+export type { GestureKind, GestureMenuAction, GestureMenuItem, GestureMenuProps, GestureMenuSection } from "./GestureMenu";
+export { GestureMenu } from "./GestureMenu";
 export type { RemoveButtonProps } from "./RemoveButton";
 export { RemoveButton } from "./RemoveButton";
 export type { SegmentedControlProps, SegmentOption } from "./SegmentedControl";

package/dist/types/chat/ChatComposer.d.ts

@@ -86,7 +86,10 @@ export type ChatComposerProps = {
     variant?: "default" | "conversation";
     /** `"enter"` (default): Enter sends and Shift+Enter breaks the line. `"mod-enter"`: Enter breaks the line. Ctrl/⌘+Enter always sends. */
     sendKey?: "enter" | "mod-enter";
-    /** Adds "Aa", which opens one row of Markdown formatting buttons above the field; the field and its controls stay put. */
+    /**
+     * Adds "Aa", which opens one row above the field with Bold, Italic and Bullet list (Ctrl/⌘+B, Ctrl/⌘+I, Ctrl/⌘+Shift+8);
+     * the field and its controls stay put. Other Markdown is typed by hand.
+     */
     formatting?: boolean;
     /** An emoji button at a fixed place. Touch-only devices hide it; their keyboard has emoji. */
     emoji?: ChatComposerEmoji;

package/dist/types/content/Calendar.d.ts

@@ -1,6 +1,7 @@
 import { type LinkNavigateEvent } from "@k2b/ssr/nav";
 import { type DateContext } from "@k2b/stdlib";
 import type { JSX } from "solid-js";
+import type { DropdownItem } from "../actions/Dropdown";
 export type CalendarView = "day" | "week" | "month" | "year" | "mobile-month";
 export type CalendarEventColor = "blue" | "emerald" | "amber" | "red" | "violet" | "cyan" | "zinc";
 export type CalendarEvent = {
@@ -63,6 +64,8 @@ export type CalendarEventRenderContext = {
     allDay: boolean;
     durationHours: number;
     timeLabel: string;
+    /** Month view: the start time to show before the title of a one-day timed entry; absent on bars and elsewhere. */
+    leadingTime?: string;
 };
 /** A view the application adds to the switcher; the calendar shows its header and toolbar, the application the body. */
 export type CalendarCustomView<V extends string = string> = {
@@ -116,10 +119,39 @@ export type CalendarProps<V extends string = never> = {
     onSlotActivate?: (slot: CalendarEventTimeChange) => void;
     /** Pointer gesture used for empty slots. Keyboard activation is always immediate. */
     slotActivation?: "single" | "double";
+    /**
+     * Month view: the selected days changed. `null` when no day is selected, for example after paging to another month
+     * or switching to another view.
+     */
+    onSelectionChange?: (range: CalendarEventTimeChange | null) => void;
+    /**
+     * Month view: the application's entries of the menu that a right-click, Shift+F10, or a long press opens on a day or
+     * on the selected days. The calendar heads them with the days and adds Open day, Open week, and Clear selection;
+     * without this prop the menu has only those. `quickCreate` opens the quick create at the days, passing `create` on to
+     * `renderQuickCreate`.
+     */
+    selectionMenu?: (range: CalendarEventTimeChange, controls: CalendarSelectionControls) => readonly DropdownItem[];
+    /**
+     * Month view: the content of the quick create at the selected days. It opens quietly after a click, keeping the
+     * focus in the grid until the person types or tabs into it (Space still lists the day), and with the focus after a
+     * drag, a double-click, Enter, N, or `quickCreate`.
+     */
+    renderQuickCreate?: (range: CalendarEventTimeChange, controls: CalendarQuickCreateControls) => JSX.Element;
     toolbarActions?: JSX.Element;
+    /** Application controls, such as filters, right after the period title. */
     toolbarContent?: JSX.Element;
     class?: string;
 };
+export type CalendarSelectionControls = {
+    /** Opens the quick create at the days of the menu; `create` names what to create, as the application defines it. */
+    quickCreate: (create?: string) => void;
+};
+export type CalendarQuickCreateControls = {
+    /** What the person asked to create through `quickCreate`; absent after a click, a drag, or the keyboard. */
+    create?: string;
+    /** Closes the quick create and returns the focus to the selected day; once another quick create replaced it, nothing. */
+    close: () => void;
+};
 export type CalendarEventTimeChange = {
     start: Date;
     end: Date;

package/dist/types/content/calendar-messages.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The month view's own strings. They live beside the calendar instead of in the shared catalog, so applications that
+ * never render a calendar do not ship them.
+ */
+declare const calendarMessages: import("@k2b/stdlib").Catalog<{
+    calendarMoreEvents: ({ count }: {
+        count: number;
+    }) => string;
+    calendarMoreEventsOn: ({ count, label }: {
+        count: number;
+        label: string;
+    }) => string;
+    calendarSelectionActions: string;
+    calendarQuickCreate: string;
+    calendarSelectedDays: ({ start, end, count }: {
+        start: string;
+        end: string;
+        count: number;
+    }) => string;
+    calendarOpenDay: string;
+    calendarOpenWeek: string;
+    calendarOpenWeekNumber: ({ week }: {
+        week: number;
+    }) => string;
+    calendarClearSelection: string;
+    calendarNewEvent: string;
+    calendarNothingPlanned: string;
+    calendarContinuesFrom: ({ day, month }: {
+        day: number;
+        month?: string;
+    }) => string;
+    calendarContinuesUntil: ({ day, month }: {
+        day: number;
+        month?: string;
+    }) => string;
+}>;
+export type CalendarMessages = ReturnType<(typeof calendarMessages)["resolve"]>["t"];
+/** Resolved from the inherited render locale, like the rest of @k2b/ui. */
+export declare const useCalendarMessages: () => (() => CalendarMessages);
+export declare const checkCalendarMessages: () => import("@k2b/stdlib").CatalogIssue[];
+export {};

package/dist/types/content/calendar-month-layout.d.ts

@@ -0,0 +1,52 @@
+/** One entry of a month week row, with its first and last day as `YYYY-MM-DD` keys. */
+export type MonthEntry<T> = {
+    item: T;
+    /** The entry's first day, which may lie before the row. */
+    firstKey: string;
+    /** The entry's last day, which may lie after the row. */
+    lastKey: string;
+    /** All-day and multi-day entries are bars that keep a lane; the others stack in their day below the bars. */
+    bar: boolean;
+};
+/** The part of a bar inside one week row, from `startColumn` to `endColumn`, both inclusive. */
+export type MonthBar<T> = {
+    item: T;
+    startColumn: number;
+    endColumn: number;
+    lane: number;
+    /** The entry began before this row: the bar's start is torn. */
+    continuesBefore: boolean;
+    /** The entry goes on after this row: the bar's end is torn. */
+    continuesAfter: boolean;
+};
+export type MonthWeekLayout<T> = {
+    bars: MonthBar<T>[];
+    /** Per column, the entries that are not bars, in the order the row lists them. */
+    singles: T[][];
+};
+/**
+ * Lays one week row out. Each bar is one piece over the days it covers in the row and keeps one lane on all of them,
+ * so a long entry never moves between its days: bars that start earlier come first, a longer bar before a shorter one
+ * with the same start, and otherwise the row's own order decides. Every lane is the lowest one free on all its days.
+ */
+export declare const layoutMonthWeek: <T>(dayKeys: readonly string[], entries: readonly MonthEntry<T>[]) => MonthWeekLayout<T>;
+/** What one day cell of a week row draws: its entries from row `top` on, and how many it counts as "+N" below them. */
+export type MonthCellFit<T> = {
+    /** The first row below the bars drawn over this day. */
+    top: number;
+    shown: T[];
+    hidden: number;
+};
+export type MonthWeekFit<T> = {
+    /** The bars drawn whole; a bar that does not fit on one of its days is counted on each of them instead. */
+    bars: MonthBar<T>[];
+    cells: MonthCellFit<T>[];
+};
+/**
+ * Fits a week row into cells that have room for `capacity` rows each. A cell whose entries all fit draws them all;
+ * otherwise it gives its last row to "+N", which counts every entry of the day that is not drawn, hidden bars included.
+ * A bar is drawn only when it fits on every day it covers, so it is never cut off by a count.
+ */
+export declare const fitMonthWeek: <T>(layout: MonthWeekLayout<T>, capacity: number) => MonthWeekFit<T>;
+/** How many rows of `lane` height with `gap` between them fit into `height`. */
+export declare const monthLaneCapacity: (height: number, lane: number, gap: number) => number;

package/dist/types/content/index.d.ts

@@ -1,4 +1,4 @@
-export type { CalendarAttendee, CalendarCustomView, CalendarDayBadge, CalendarEvent, CalendarEventColor, CalendarEventRenderContext, CalendarEventTimeChange, CalendarLabels, CalendarProps, CalendarRecurrence, CalendarResource, CalendarView, } from "./Calendar";
+export type { CalendarAttendee, CalendarCustomView, CalendarDayBadge, CalendarEvent, CalendarEventColor, CalendarEventRenderContext, CalendarEventTimeChange, CalendarLabels, CalendarProps, CalendarQuickCreateControls, CalendarRecurrence, CalendarResource, CalendarSelectionControls, CalendarView, } from "./Calendar";
 export { default as Calendar } from "./Calendar";
 export type { ChartKind, ChartLabels, ChartProps, ChartRenderOptions } from "./Chart";
 export { default as Chart } from "./Chart";

package/dist/types/inputs/date-picker.d.ts

@@ -23,6 +23,13 @@ export declare const yearMonth: (date: Date, context?: DateContext) => {
     month: number;
 };
 export declare const monthDate: (year: number, month: number, context?: DateContext) => Date;
+/**
+ * Milliseconds from `now` until the next calendar day starts in the picker's
+ * time zone, so a panel left open past midnight moves its today mark on time.
+ * The next day's start is resolved from its date key: where a DST change skips
+ * or repeats midnight, the day starts at its first existing instant.
+ */
+export declare const msUntilNextDay: (now: Date, context?: DateContext) => number;
 export declare const parseDateValue: (value: string | null | undefined, context?: DateContext) => Date;
 export declare const displayDate: (value: string | null | undefined, context?: DateContext) => string;
 export declare const dateTimeInput: (value: string | null | undefined, context?: DateContext) => string;

package/dist/types/inputs/markdown/actions.d.ts

@@ -6,7 +6,5 @@ export declare const toggleInlineMarker: (textarea: HTMLTextAreaElement, marker:
 export declare const insertLink: (textarea: HTMLTextAreaElement, url?: string) => void;
 export declare const toggleHeading: (textarea: HTMLTextAreaElement, level: 1 | 2 | 3) => void;
 export declare const toggleBulletList: (textarea: HTMLTextAreaElement) => void;
-/** Puts the selected lines between ``` fences. Inside a fenced block, from its opening line on, it removes that block's fences. */
-export declare const toggleCodeBlock: (textarea: HTMLTextAreaElement) => void;
 export declare const toggleQuote: (textarea: HTMLTextAreaElement) => void;
 export declare const toggleNumberedList: (textarea: HTMLTextAreaElement) => void;

package/dist/types/intl/messages.d.ts

@@ -219,6 +219,9 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
         time: string;
     }) => string;
     today: string;
+    todayDate: ({ date }: {
+        date: string;
+    }) => string;
     day: string;
     week: string;
     weekShort: string;
@@ -456,9 +459,6 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     writeMessage: string;
     writeConversationMessage: string;
     composerFormatting: string;
-    strikethroughShortcut: string;
-    codeBlock: string;
-    insertLink: string;
     insertEmoji: string;
     emojiSuggestions: string;
     dictate: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "fixture:build": "bun run build && NODE_ENV=production bun run fixture/scripts/build.ts",
     "fixture:typecheck": "tsc -p fixture/tsconfig.json --noEmit --pretty false",
     "test": "bun run build && bun test --path-ignore-patterns '**/*.behavior.test.*' src scripts && bun run scripts/check-packed-consumer.ts",
-    "typecheck": "tsc -p tsconfig.json --noEmit --pretty false && bun run check:declarations && bun run typecheck:dom",
+    "typecheck": "tsc --checkers 2 -p tsconfig.json --noEmit --pretty false && bun run check:declarations && bun run typecheck:dom",
     "typecheck:dom": "tsc -p test/tsconfig.json --noEmit --pretty false",
     "prepack": "bun run build"
   },