@k2b/ui 0.1.0-rc.0 → 0.1.0

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

@@ -0,0 +1,25 @@
+import { type JSX } from "solid-js";
+import { type Completion } from "../completion";
+import type { ValueFieldProps } from "../field-contract";
+export type MarkdownEditorProps = ValueFieldProps<string> & {
+    onSubmit?: () => void;
+    placeholder?: string;
+    lines?: number;
+    noToolbar?: boolean;
+    spellcheck?: boolean;
+    name?: string;
+    maxLength?: number;
+    textareaRef?: (element: HTMLTextAreaElement) => void;
+    abbreviations?: Record<string, string>;
+    completions?: readonly Completion[];
+    showStats?: boolean;
+    variant?: "default" | "paper";
+    fill?: boolean;
+    onSave?: () => void;
+    saveDisabled?: boolean;
+    saving?: boolean;
+    toolbarTrailing?: JSX.Element;
+};
+export declare function MarkdownEditor(props: MarkdownEditorProps): JSX.Element;
+export type { Completion, SuggestContext, Suggestion } from "../completion";
+export { abbreviations } from "../completion";

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

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+type ToolbarProps = {
+    textarea: () => HTMLTextAreaElement | null;
+    activeFormats?: () => Set<string>;
+    disabled?: boolean;
+    trailing?: JSX.Element;
+};
+export default function Toolbar(props: ToolbarProps): JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+export declare const toggleBold: (textarea: HTMLTextAreaElement) => void;
+export declare const toggleItalic: (textarea: HTMLTextAreaElement) => void;
+export declare const toggleCode: (textarea: HTMLTextAreaElement) => void;
+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;
+export declare const toggleQuote: (textarea: HTMLTextAreaElement) => void;
+export declare const toggleNumberedList: (textarea: HTMLTextAreaElement) => void;

package/dist/types/inputs/markdown/active-formats.d.ts

@@ -0,0 +1 @@
+export declare const computeActiveFormats: (textarea: HTMLTextAreaElement) => Set<string>;

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

@@ -0,0 +1,3 @@
+export declare const handleShortcut: (event: KeyboardEvent, textarea: HTMLTextAreaElement) => boolean;
+export declare const handleListContinuation: (textarea: HTMLTextAreaElement) => boolean;
+export declare const handleSmartPaste: (event: ClipboardEvent, textarea: HTMLTextAreaElement) => boolean;

package/dist/types/inputs/markdown/code-zone.d.ts

@@ -0,0 +1 @@
+export declare const isInCodeZone: (text: string, position: number) => boolean;

package/dist/types/internal/color.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from "solid-js";
+export declare const normalizeHexColor: (value: string | null | undefined) => string | undefined;
+export declare const hexWithAlpha: (value: string, alpha: string) => string;
+export declare const colorTintStyle: (value: string | null | undefined) => JSX.CSSProperties | undefined;

package/dist/types/internal/field.d.ts

@@ -0,0 +1,27 @@
+import { type JSX } from "solid-js";
+import type { FieldProps } from "../inputs/field-contract";
+export type FieldMeta = {
+    controlId: string;
+    labelId: string;
+    descriptionId: string;
+    errorId: string;
+};
+export declare const createFieldMeta: (id?: string) => FieldMeta;
+type FieldLayoutProps = {
+    children: JSX.Element;
+    meta: FieldMeta;
+    fill?: boolean;
+    /** Composite controls use aria-labelledby instead of an HTML label target. */
+    labelFor?: string | false;
+} & Pick<FieldProps, "class" | "description" | "error" | "label" | "required" | "disabled">;
+export declare function Field(props: FieldLayoutProps): JSX.Element;
+type FieldAriaOwner = Pick<FieldProps, "aria-describedby" | "aria-label" | "description" | "error" | "label" | "required">;
+export declare const fieldDescribedBy: (meta: FieldMeta, owner: FieldAriaOwner) => string | undefined;
+export declare const fieldControlAria: (meta: FieldMeta, owner: FieldAriaOwner) => {
+    readonly "aria-label": string | undefined;
+    readonly "aria-labelledby": string | undefined;
+    readonly "aria-describedby": string | undefined;
+    readonly "aria-invalid": "true" | undefined;
+    readonly "aria-required": true | undefined;
+};
+export {};

package/dist/types/internal/portal.d.ts

@@ -0,0 +1 @@
+export declare const getK2bPortalRoot: (scope?: HTMLElement | null) => HTMLElement;

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

@@ -0,0 +1,84 @@
+import { type ByteMode } from "@k2b/stdlib";
+import { type JSX } from "solid-js";
+type SpanProps = JSX.HTMLAttributes<HTMLSpanElement>;
+type TimeElementProps = Omit<JSX.HTMLAttributes<HTMLElement>, "ref">;
+type LocaleProp = {
+    /** Explicit locale override; defaults to the inherited render locale. */
+    locale?: string;
+};
+type FallbackProp = {
+    /** Text rendered for null or invalid input. Defaults to `"—"`. */
+    fallback?: string;
+};
+export type FormatNumberProps = SpanProps & LocaleProp & FallbackProp & {
+    value: number | null | undefined;
+    /** Use deterministic compact suffixes (`k`, `M`, `B`, `T`). */
+    compact?: boolean;
+    /** Fixed fraction digits. */
+    decimals?: number;
+};
+export type FormatPercentProps = SpanProps & LocaleProp & FallbackProp & {
+    /** Ratio input: `0.12` renders as `12%`. */
+    value: number | null | undefined;
+    /** Fixed fraction digits. Defaults to 0. */
+    decimals?: number;
+    /** Clamp the ratio to 0..1 before formatting. */
+    clamp?: boolean;
+};
+export type FormatCurrencyProps = SpanProps & LocaleProp & FallbackProp & {
+    value: number | null | undefined;
+    /** ISO 4217 currency code, e.g. `"EUR"` or `"USD"`. */
+    currency: string;
+    /** Fixed fraction digits. Defaults to the currency's standard digits. */
+    decimals?: number;
+};
+export type FormatBytesProps = SpanProps & LocaleProp & FallbackProp & {
+    value: number | null | undefined;
+    /** `"iec"` (default, 1024-base) or `"si"` (1000-base). */
+    mode?: ByteMode;
+};
+export type FormatDateProps = TimeElementProps & LocaleProp & FallbackProp & {
+    value: Date | string | null | undefined;
+    /** IANA timezone. Defaults to `"UTC"` so server and browser text agree. */
+    timeZone?: string;
+};
+export type FormatTimeProps = FormatDateProps;
+export type FormatDateTimeProps = FormatDateProps;
+export type FormatRelativeTimeProps = TimeElementProps & LocaleProp & FallbackProp & {
+    value: Date | string | null | undefined;
+    /** Deterministic base timestamp; defaults to now. */
+    base?: Date | string;
+    /** IANA timezone used to select calendar-relative labels. Defaults to `"UTC"`. */
+    timeZone?: string;
+};
+export type FormatDurationProps = TimeElementProps & LocaleProp & FallbackProp & {
+    from: Date | string | null | undefined;
+    to: Date | string | null | undefined;
+};
+export type FormatDurationMsProps = TimeElementProps & LocaleProp & FallbackProp & {
+    /** Duration in milliseconds. */
+    value: number | null | undefined;
+};
+/**
+ * Unstyled semantic formatter components backed by `@k2b/stdlib`.
+ *
+ * Numeric components render a plain `<span>`; date/time components render
+ * `<time>` with a canonical `datetime` attribute. All components inherit the
+ * render locale (see `LocaleProvider` / `useLocale`) and accept an explicit
+ * `locale` override. Date, Time, and DateTime format in UTC unless an
+ * explicit `timeZone` is given, so server and browser output never diverge
+ * with the runtime timezone.
+ */
+export declare const Format: {
+    readonly Number: (props: FormatNumberProps) => JSX.Element;
+    readonly Percent: (props: FormatPercentProps) => JSX.Element;
+    readonly Currency: (props: FormatCurrencyProps) => JSX.Element;
+    readonly Bytes: (props: FormatBytesProps) => JSX.Element;
+    readonly Date: (props: FormatDateProps) => JSX.Element;
+    readonly Time: (props: FormatDateProps) => JSX.Element;
+    readonly DateTime: (props: FormatDateProps) => JSX.Element;
+    readonly RelativeTime: (props: FormatRelativeTimeProps) => JSX.Element;
+    readonly Duration: (props: FormatDurationProps) => JSX.Element;
+    readonly DurationMs: (props: FormatDurationMsProps) => JSX.Element;
+};
+export {};

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

@@ -0,0 +1,4 @@
+export type { FormatBytesProps, FormatCurrencyProps, FormatDateProps, FormatDateTimeProps, FormatDurationMsProps, FormatDurationProps, FormatNumberProps, FormatPercentProps, FormatRelativeTimeProps, FormatTimeProps, } from "./Format";
+export { Format } from "./Format";
+export type { LocaleProviderProps } from "./locale";
+export { LocaleProvider, useLocale } from "./locale";

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

@@ -0,0 +1,42 @@
+import type { DateContext } from "@k2b/stdlib";
+import { type JSX } from "solid-js";
+/**
+ * Deterministic fallback locale used when neither a `LocaleProvider` nor a
+ * browser `<html lang>` value is available.
+ */
+export declare const DEFAULT_LOCALE = "en";
+export type LocaleProviderProps = {
+    /** BCP 47 locale tag, e.g. `"en"`, `"de"`, or `"de-AT"`. */
+    locale: string;
+    children?: JSX.Element;
+};
+/**
+ * Provides the render locale to all descendant `@k2b/ui` components.
+ *
+ * On the server this is the only locale source, so SSR consumers wrap their
+ * page in a provider and emit a matching `<html lang>` attribute. A browser
+ * island is an independent Solid root: an outer server-side provider does not
+ * survive the island's browser re-render, which instead falls back to
+ * `document.documentElement.lang`. Keeping `<html lang>` equal to the server
+ * provider locale therefore keeps both passes coherent.
+ */
+export declare const LocaleProvider: (props: LocaleProviderProps) => JSX.Element;
+/**
+ * Resolves the effective render locale as a reactive accessor.
+ *
+ * Precedence: nearest `LocaleProvider`, then the browser's
+ * `document.documentElement.lang`, then `"en"`. Components with an explicit
+ * `locale` prop apply it before consulting this hook.
+ */
+export declare const useLocale: () => (() => string);
+/**
+ * Effective date config for date surfaces: an explicit `dateConfig.locale`
+ * wins, otherwise the inherited render locale fills the gap. Timezone and
+ * week-start configuration pass through untouched.
+ */
+export declare const useDateConfigLocale: (config: () => DateContext | undefined) => (() => DateContext);
+/**
+ * The decimal separator `Intl.NumberFormat` uses for a locale, e.g. `"."`
+ * for English and `","` for German.
+ */
+export declare const decimalSeparator: (locale: string) => string;

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

@@ -0,0 +1,375 @@
+declare const uiMessages: import("@k2b/stdlib").Catalog<{
+    actions: string;
+    add: string;
+    addTag: string;
+    addImage: string;
+    attachments: string;
+    assistant: string;
+    avatarLabel: ({ name }: {
+        name: string;
+    }) => string;
+    all: string;
+    calendar: string;
+    clear: string;
+    clearDate: string;
+    clearSelection: string;
+    chooseOption: string;
+    close: string;
+    closeDialog: string;
+    copied: string;
+    copy: string;
+    closeLightbox: string;
+    couldNotLoadData: string;
+    datePicker: string;
+    dataTable: string;
+    datePresets: string;
+    decreaseValue: string;
+    download: string;
+    downloadAsZip: string;
+    downloadImage: string;
+    dropFiles: string;
+    dropToUpload: string;
+    dropdownMenu: string;
+    durationPresets: string;
+    filterOptions: string;
+    fileTypeNotAccepted: string;
+    imageLightbox: string;
+    imageNavigation: string;
+    increaseValue: string;
+    loading: string;
+    hidePassword: string;
+    noColumns: string;
+    noData: string;
+    noRecords: string;
+    noTagsYet: string;
+    noResultsFound: string;
+    nextImage: string;
+    noOptions: string;
+    optionsCouldNotLoad: string;
+    noResults: string;
+    nothingHere: string;
+    nothingToShow: string;
+    no: string;
+    options: string;
+    pagination: string;
+    pageOf: ({ page, total }: {
+        page: number;
+        total: number;
+    }) => string;
+    pickDate: string;
+    previousImage: string;
+    previousMonth: string;
+    previousPage: string;
+    previousYear: string;
+    nextMonth: string;
+    nextPage: string;
+    nextYear: string;
+    goToPage: ({ page }: {
+        page: number;
+    }) => string;
+    retry: string;
+    reset: string;
+    required: string;
+    rename: string;
+    delete: string;
+    remove: string;
+    removeTag: string;
+    search: string;
+    searchLabel: string;
+    spotlightNoResults: string;
+    searchFailed: string;
+    searchResults: string;
+    save: string;
+    saveShortcut: string;
+    sectionsLabel: ({ title }: {
+        title: string;
+    }) => string;
+    searchOptions: string;
+    select: string;
+    selectMatchingOption: string;
+    selectOption: string;
+    suggestions: string;
+    suggestionsCouldNotLoad: string;
+    showPassword: string;
+    time: string;
+    timeLabel: ({ label }: {
+        label: string;
+    }) => string;
+    completionSuggestions: string;
+    contextMenu: string;
+    unknownUser: string;
+    uploading: string;
+    chooseFile: string;
+    chooseFiles: string;
+    chooseMatchingFile: string;
+    checkingOptions: string;
+    checkingOptionsLoading: string;
+    noMatchingOption: string;
+    noOptionsFound: string;
+    typeToSearch: string;
+    showGridView: string;
+    showListView: string;
+    start: string;
+    end: string;
+    addFileFolderUpload: string;
+    addPane: string;
+    addToChat: string;
+    attachFiles: string;
+    addGuidance: string;
+    calendarView: string;
+    openDate: ({ label }: {
+        label: string;
+    }) => string;
+    createEventOn: ({ label }: {
+        label: string;
+    }) => string;
+    hiddenOverlappingEvents: ({ count }: {
+        count: number;
+    }) => string;
+    today: string;
+    day: string;
+    week: string;
+    weekShort: string;
+    month: string;
+    year: string;
+    allDay: string;
+    noEvents: string;
+    previous: string;
+    next: string;
+    moveEvent: string;
+    resizeEvent: string;
+    cancel: string;
+    chat: string;
+    chooseModel: string;
+    closeWindow: string;
+    code: string;
+    codeLabel: ({ title }: {
+        title: string;
+    }) => string;
+    column: ({ number }: {
+        number: number;
+    }) => string;
+    commands: string;
+    dropFilesToAttach: string;
+    conversation: string;
+    conversationMessages: ({ label }: {
+        label: string;
+    }) => string;
+    dialogTabs: string;
+    files: string;
+    chooseFileToPreview: string;
+    change: string;
+    changeImage: string;
+    cropArea: string;
+    cropPreview: string;
+    discardChanges: string;
+    discardUnsavedFile: string;
+    downloadFailed: string;
+    failedLoadFiles: string;
+    failedLoadImage: string;
+    folderEmpty: string;
+    folderSelected: string;
+    newFile: string;
+    newFileName: string;
+    newFolder: string;
+    newFolderName: string;
+    fileActions: string;
+    actionsFor: ({ name }: {
+        name: string;
+    }) => string;
+    fileSaved: string;
+    pickFileFromTree: string;
+    imageProcessingFailed: string;
+    preparingImage: string;
+    processingImage: string;
+    removeImage: string;
+    rotateRight: string;
+    selectedImage: string;
+    selectFile: string;
+    spaceEmpty: string;
+    uploadFiles: string;
+    filterIcons: string;
+    loadEarlier: string;
+    loadingConversation: string;
+    loadingFiles: string;
+    loadingMessages: string;
+    failed: string;
+    generating: string;
+    loadOlderMessages: string;
+    loadingOlderMessages: string;
+    couldNotLoadOlderMessages: string;
+    couldNotLoadEarlierMessages: string;
+    couldNotPostMessage: string;
+    message: string;
+    messageActions: string;
+    messageComposer: string;
+    messageInput: string;
+    confirmation: string;
+    confirm: string;
+    dialog: string;
+    discard: string;
+    error: string;
+    form: string;
+    filterActions: string;
+    info: string;
+    interactiveLineChart: string;
+    interactiveMap: string;
+    interactiveTimeline: string;
+    ok: string;
+    success: string;
+    model: string;
+    input: string;
+    output: string;
+    loopTotal: string;
+    remaining: string;
+    notConfigured: string;
+    unknown: string;
+    system: string;
+    tool: string;
+    user: string;
+    useColor: string;
+    useTransparent: string;
+    series: string;
+    waiting: string;
+    templateEditorPlaceholder: string;
+    templatePreview: string;
+    lastRequestContext: string;
+    contextWindowUsed: string;
+    contextUsageUnavailable: string;
+    contextUsageUnavailableWithWindow: ({ window }: {
+        window: string;
+    }) => string;
+    tokensUsed: ({ total }: {
+        total: string;
+    }) => string;
+    tokensUsedPercent: ({ total, percent }: {
+        total: string;
+        percent: number;
+    }) => string;
+    moveDown: string;
+    moveUp: string;
+    moveNamedDown: ({ label }: {
+        label: string;
+    }) => string;
+    moveNamedUp: ({ label }: {
+        label: string;
+    }) => string;
+    rowAction: string;
+    addToNamed: ({ name }: {
+        name: string;
+    }) => string;
+    insertBeforeNamed: ({ name }: {
+        name: string;
+    }) => string;
+    insertAtEnd: string;
+    addPaneSide: ({ side, name }: {
+        side: "left" | "right" | "top" | "bottom";
+        name: string;
+    }) => string;
+    discardUnsavedChanges: string;
+    unsavedChangesTitle: string;
+    tagName: string;
+    name: string;
+    color: string;
+    tagCouldNotBeSaved: string;
+    tagActionFailed: string;
+    tagsPlaceholder: string;
+    tagsAdded: ({ tags }: {
+        tags: string;
+    }) => string;
+    tagsRemoved: ({ tags }: {
+        tags: string;
+    }) => string;
+    noFiles: string;
+    noLogEntries: string;
+    noPreview: string;
+    openPreview: string;
+    paneTabs: string;
+    paneWorkspace: string;
+    pdfPreview: string;
+    pdfPreviewHttpError: ({ status }: {
+        status: number;
+    }) => string;
+    pickIcon: string;
+    postMessage: string;
+    preview: string;
+    previewPdf: string;
+    renderPdfPreview: string;
+    queueMessage: string;
+    queueing: string;
+    sending: string;
+    steering: string;
+    writeMessage: string;
+    openInNewTab: ({ name }: {
+        name: string;
+    }) => string;
+    closeNamed: ({ name }: {
+        name: string;
+    }) => string;
+    goToImage: ({ index }: {
+        index: number;
+    }) => string;
+    pinDigit: ({ index, total }: {
+        index: number;
+        total: number;
+    }) => string;
+    removeNamed: ({ name }: {
+        name: string;
+    }) => string;
+    resizeCrop: ({ handle }: {
+        handle: string;
+    }) => string;
+    range: string;
+    resizePanes: string;
+    resetMapView: string;
+    resetTimelineView: string;
+    retryOlderMessages: string;
+    saveChanges: string;
+    saving: string;
+    sendMessage: string;
+    startConversation: string;
+    steerResponse: string;
+    stopResponse: string;
+    stopping: string;
+    unsaved: string;
+    unsavedChangeLabel: ({ count }: {
+        count: number;
+    }) => string;
+    noUnsavedChanges: string;
+    moveWindow: ({ title }: {
+        title: string;
+    }) => string;
+    resizeWindow: string;
+    window: string;
+    zoomIn: string;
+    zoomOut: string;
+    binaryFile: string;
+    boldShortcut: string;
+    bulletListShortcut: string;
+    heading1Shortcut: string;
+    heading2Shortcut: string;
+    heading3Shortcut: string;
+    inlineCodeShortcut: string;
+    italicShortcut: string;
+    linkShortcut: string;
+    markdownFormatting: string;
+    numberedListShortcut: string;
+    quote: string;
+    delimitedFileEmpty: string;
+    edit: string;
+    emptyFile: string;
+    failedLoadFile: string;
+    noInlinePreview: string;
+    previewLimited: string;
+    textEditor: string;
+    audioUnsupported: string;
+    videoUnsupported: string;
+    yes: string;
+}>;
+export type UiMessages = ReturnType<(typeof uiMessages)["resolve"]>["t"];
+/** Generic component chrome owned by @k2b/ui, resolved from the inherited render locale. */
+export declare const useUiMessages: () => (() => UiMessages);
+/** Browser-only imperative UI (for example prompts) inherits the document locale. */
+export declare const resolveUiMessages: (locale?: string) => UiMessages;
+export declare const checkUiMessages: () => import("@k2b/stdlib").CatalogIssue[];
+export {};

package/dist/types/layout/AppOverview.d.ts

@@ -0,0 +1,29 @@
+import { type JSX } from "solid-js";
+export type AppOverviewProps = {
+    title: string;
+    subtitle?: string;
+    icon: string;
+    class?: string;
+    children: JSX.Element;
+};
+export type AppOverviewPanelProps = {
+    title: string;
+    description?: JSX.Element;
+    toolbar?: JSX.Element;
+    class?: string;
+    children: JSX.Element;
+};
+export type AppOverviewEmptyStateProps = {
+    title: string;
+    description?: JSX.Element;
+    icon?: string;
+    class?: string;
+    children?: JSX.Element;
+};
+type AppOverviewComponent = ((props: AppOverviewProps) => JSX.Element) & {
+    Main: (props: AppOverviewPanelProps) => JSX.Element;
+    Aside: (props: AppOverviewPanelProps) => JSX.Element;
+    EmptyState: (props: AppOverviewEmptyStateProps) => JSX.Element;
+};
+declare const AppOverview: AppOverviewComponent;
+export default AppOverview;