@synopackageland/ui 0.17.9 → 0.17.11

package/docs/layout-rules.md

@@ -40,9 +40,13 @@ These rules keep pages built from `@synopackageland/ui` consistent. The componen
 - Colours are fixed by role: section title `--ui-text` semibold 14px, label and value `--ui-text`, help text `--ui-text-secondary` 12px.
 - A `SettingsRow` with a `description` aligns its label with the control's first line, not the middle of control and description.
 - A row that is only a button: give it a `SettingsRow` label when it acts on one thing, or put it in the section `#footer`. Inside a horizontal form, use `FormActions inset` so the button starts on the value edge.
-- A DSM-native settings page reads its structure from indentation and spacing. Each section is a `Fieldset` (blue title over a dashed divider, collapsible); sections one after another keep a 20px gap. Fields are a `Form` with one `labelWidth` (or the theme's column) and `FormItem`s.
-- Options that only matter while a checkbox or switch is on go in a `FormGroup` right after it, with `:disabled="!on"`: one 28px indent, every control inside disabled and dimmed, and the labels inside give up the indent so the controls stay on the form's column. Nest a `FormGroup` for a second level. Do not indent with your own padding or disable each child by hand.
-- Explanation is a short `description` under its field. A note the user should read before changing a section is a `FormNote` (DSM's teal "Note:" with bullets) after the fields; facts to read or copy (addresses, paths) go in an `InfoBox`. A warning or an error is a `Callout`. Do not write long full-width paragraphs between fields.
+- A DSM-native settings page reads its structure from indentation and spacing (Control Panel > Network > General). Each section is a `Fieldset`: a blue title with a chevron (up while open) over a dashed divider across the whole width, collapsible. Sections one after another keep a 20px gap. A one-line explanation of the section is the Fieldset's `description`, directly under the title and across the whole width, not in the label column. Fields are one `Form` with one `labelWidth` (or the theme's column) and `FormItem`s; one `Form` may hold several Fieldsets.
+- A read-only value is a `FormItem` with `text-only`: plain text in the control column, level with its label. A button that acts on it (Edit) goes in the item's `#after` slot and follows the field column.
+- Options that only matter while a checkbox or switch is on go in a `FormGroup` right after it, with `:disabled="!on"`. The parent is a `FormItem :label="false"`, so it starts at the section's left edge. The group indents one 28px step, disables and dims every control inside, and the labels inside give up the indent so the controls stay on the form's column, as DSM draws them. Nest a `FormGroup` for a second level. Do not indent with your own padding or disable each child by hand.
+- A section button such as Advanced Settings goes inside the `FormGroup` it belongs to, after its fields, as a plain `Button`: it starts on the group's indent and follows the group's disabled state. Do not centre it or put it in the label column.
+- A unit goes in the `Input`'s `unit` (or `#unit` slot): `<Input v-model="timeout" type="number" unit="s" />` puts "s" right after the field. Do not put units in the FormItem's `#after` slot, which starts after the whole field column.
+- Explanation is a short `description` under its field. A note is a `FormNote`: one remark reads "Note: …" on one line, two or more `items` become a list under the heading. Put it under the field it is about with `inset` (it starts on the field column), or at the end of the section without. Facts to read or copy (addresses, paths) go in an `InfoBox`. A warning or an error is a `Callout`. Do not write long full-width paragraphs or a separate "Note:" heading between fields.
+- A settings page has one Apply. On a page or window, put Reset then Apply in the footer (`Footbar`, `AppActionBar`), as Control Panel does; inside a form that ends the page, use `FormActions inset`. Do not put a Save between the fields of a section.
 
 ## Tables
 

package/docs/theme-hooks.md

@@ -94,8 +94,10 @@ here stay implementation details and can change in any release.
 | `data-ui-stat-tile-label`, `-value`, `-unit`, `-note` | `StatTile` parts | present |
 | `data-ui-stat-tile-group` | `StatTileGroup` | present |
 | `data-ui-fieldset` | `Fieldset` | present |
+| `data-fieldset-description` | `Fieldset` description under the title | present |
 | `data-ui-form-group` | `FormGroup` (`data-disabled` while disabled) | present |
-| `data-ui-form-note`, `data-ui-form-note-title` | `FormNote` and its heading | present |
+| `data-ui-form-note`, `data-ui-form-note-title` | `FormNote` and its heading (`data-inset` with `inset`) | present |
+| `data-ui-input-unit` | `Input` unit after the field | present |
 | `data-ui-info-box`, `data-ui-info-box-title` | `InfoBox` and its title | present |
 | `data-ui-stacked-bar`, `-track`, `-segment`, `-legend`, `-remainder` | `StackedBar` parts (a segment has `data-key` and `data-tone`) | present |
 | `data-ui-section-tabs-row`, `data-ui-section-tabs-actions` | `SectionTabs` with `#actions`: the row and the actions | present |
@@ -103,8 +105,17 @@ here stay implementation details and can change in any release.
 | `data-ui-tab-bar-item`, `-more`, `-label`, `-badge` | `AppTabBar` parts (an item's value is its key) | key / present |
 | `--ui-tab-bar-height`, `--ui-tab-bar-bg`, `--ui-tab-bar-border` | `AppTabBar` height (56px), fill and top border | CSS tokens |
 | `data-ui-completion-toggle` | `CompletionToggle` (`data-state` `idle` / `done`, `data-error`) | present |
-| `data-ui-mention-textarea`, `-input`, `-count`, `-list`, `-option`, `-empty` | `MentionTextarea` parts (`data-over` past `maxlength`) | present |
-| `data-ui-comment`, `-author`, `-time`, `-edited`, `-body`, `-mention`, `-link`, `-code`, `-list`, `-actions` | `CommentItem` parts (`data-deleted`, `data-highlighted`) | present |
+| `data-ui-mention-list`, `data-ui-mention-option`, `data-ui-mention-empty` | `MentionList` parts (an option's value is the person's id) | id / present |
+| `data-ui-comment`, `-author`, `-time`, `-edited`, `-body`, `-actions` | `CommentItem` parts (`data-deleted`, `data-highlighted`); the body is a `RichTextView` | present |
+| `data-ui-rich-text-view` | `RichTextView` | present |
+| `data-ui-rich-paragraph`, `-heading`, `-list`, `-quote`, `-code-block`, `-code`, `-link` | `RichTextView` blocks and inline parts | present |
+| `data-ui-rich-mention`, `data-ui-rich-image` | a mention (`data-inactive`) and an image (`data-state`) in a `RichTextView` | id |
+| `data-ui-file-thumbs`, `data-ui-file-thumb`, `-thumb-remove`, `-thumbs-more` | `FileThumbs` parts | present |
+| `data-ui-lightbox`, `-overlay`, `-name`, `-count`, `-download`, `-close`, `-stage`, `-image`, `-file`, `-processing`, `-previous`, `-next` | `ImageLightbox` parts | present |
+| `data-ui-upload-queue`, `-summary`, `-list`, `-task`, `-status`, `-retry`, `-cancel`, `-retry-all`, `-cancel-all`, `-fold`, `-close` | `UploadQueue` parts (a task has `data-status`) | present |
+| `data-ui-rich-editor` | `RichTextEditor` (`data-variant` `compact` / `full`, `data-over` past `maxlength`) | present |
+| `data-ui-rich-editor-content`, `data-ui-rich-toolbar`, `-more`, `-bubble`, `-format-row`, `-format-toggle`, `-link-row`, `-actions`, `-send`, `-count`, `-notes` | `RichTextEditor` parts | present |
+| `data-ui-rich-tool`, `data-ui-rich-attachment`, `data-ui-rich-editor-image` | an editor format button (its key), an image under a compact box (its file id) and an image in a full one (`data-state`) | key / id / present |
 | `data-tone` | `Callout` | `info`, `success`, `warning`, `danger` |
 | `data-variant` | `Callout` | `soft`, `inline` |
 | `data-fill` | `Callout` | present when it spans its container |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.17.9",
+  "version": "0.17.11",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -40,6 +40,10 @@
       "types": "./dist/json.d.ts",
       "import": "./dist/json.js"
     },
+    "./rich-text": {
+      "types": "./dist/rich-text.d.ts",
+      "import": "./dist/rich-text.js"
+    },
     "./json-catalog.schema.json": "./dist/json-catalog.schema.json",
     "./json-ai-prompt.md": "./dist/json-ai-prompt.md",
     "./theme.css": "./dist/theme.css",
@@ -52,10 +56,19 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
+    "@floating-ui/dom": "1.8.0",
     "@internationalized/date": "3.12.4",
     "@json-render/core": "0.21.0",
     "@json-render/vue": "0.21.0",
     "@lucide/vue": "1.48.0",
+    "@tiptap/core": "3.32.1",
+    "@tiptap/extension-bubble-menu": "3.32.1",
+    "@tiptap/extension-mention": "3.32.1",
+    "@tiptap/extensions": "3.32.1",
+    "@tiptap/pm": "3.32.1",
+    "@tiptap/starter-kit": "3.32.1",
+    "@tiptap/suggestion": "3.32.1",
+    "@tiptap/vue-3": "3.32.1",
     "zod": "^4.6.5"
   },
   "engines": {

package/dist/components/composite/comment-item/CommentInlineParts.vue.d.ts

@@ -1,7 +0,0 @@
-import { CommentInline } from '../../../lib/commentMarkdown';
-type __VLS_Props = {
-    parts: CommentInline[];
-};
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/components/composite/mention-textarea/MentionTextarea.vue.d.ts

@@ -1,52 +0,0 @@
-import { MentionCandidate } from '../../../lib/mentions';
-type __VLS_Props = {
-    modelValue?: string;
-    /** The people mentioned so far, each still written as `@Label` in the text. */
-    mentions?: MentionCandidate[];
-    /** People to offer for the current query. */
-    candidates?: MentionCandidate[];
-    /** Narrows `candidates` by the query here; turn off when the server already did. */
-    filter?: boolean;
-    /** Shows "Loading…" in the list while the caller fetches. */
-    loading?: boolean;
-    /** Characters the stored body may hold; the count shows from 90% and over. */
-    maxlength?: number;
-    /** Where the list opens; `top` suits a box pinned to the bottom of a screen. */
-    side?: 'top' | 'bottom';
-    placeholder?: string;
-    /** Visible lines before it grows; it grows with its text to about eight lines where the browser supports it. */
-    rows?: number;
-    disabled?: boolean;
-    invalid?: boolean;
-    id?: string;
-    ariaLabel?: string;
-};
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
-    focus: () => void | undefined;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    search: (query: string) => any;
-    select: (person: MentionCandidate) => any;
-    "update:modelValue": (text: string) => any;
-    "update:mentions": (mentions: MentionCandidate[]) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSearch?: ((query: string) => any) | undefined;
-    onSelect?: ((person: MentionCandidate) => any) | undefined;
-    "onUpdate:modelValue"?: ((text: string) => any) | undefined;
-    "onUpdate:mentions"?: ((mentions: MentionCandidate[]) => any) | undefined;
-}>, {
-    filter: boolean;
-    loading: boolean;
-    disabled: boolean;
-    id: string;
-    modelValue: string;
-    placeholder: string;
-    invalid: boolean;
-    ariaLabel: string;
-    rows: number;
-    side: "top" | "bottom";
-    mentions: MentionCandidate[];
-    candidates: MentionCandidate[];
-    maxlength: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/lib/commentMarkdown.d.ts

@@ -1,34 +0,0 @@
-import { MentionCandidate } from './mentions';
-type Marks = {
-    strong?: true;
-    em?: true;
-};
-export type CommentInline = ({
-    type: 'text';
-    text: string;
-} & Marks) | ({
-    type: 'link';
-    text: string;
-    href: string;
-} & Marks) | ({
-    type: 'mention';
-    id: string;
-    label: string;
-    inactive: boolean;
-    known: boolean;
-} & Marks) | {
-    type: 'code';
-    text: string;
-};
-export type CommentBlock = {
-    type: 'paragraph';
-    parts: CommentInline[];
-} | {
-    type: 'list';
-    items: CommentInline[][];
-};
-/** A comment body → paragraphs (text keeps its line breaks) and lists of inline parts. */
-export declare function commentMarkdownParts(body: string, people?: readonly MentionCandidate[]): CommentBlock[];
-/** A comment body as plain text without the Markdown, for a notification or a preview: mentions as `@Label`, links as their text, list items as `• item`. */
-export declare function commentMarkdownText(body: string, people?: readonly MentionCandidate[]): string;
-export {};