@inkbar/vue 0.10.0 → 0.12.0

package/README.md

@@ -69,6 +69,7 @@ const tools = [highlightTool(), redactAreaTool(), noteTool()]
     :assets="assets"
     :tools="tools"
     v-model:annotations="annotations"
+    :history="true"
   >
     <InkToolbar>
       <InkToolButton tool="select-text" />
@@ -93,11 +94,19 @@ const tools = [highlightTool(), redactAreaTool(), noteTool()]
 </template>
 ```
 
-`select-text` and `select` are always there. Every other tool is opt-in: pass the ones you offer through `tools`, from the tool factories in `@inkbar/core/dom`, or `allTools()` for all of them. A button for a tool you did not pass renders disabled and hidden, a tool menu renders nothing, and each logs an `InkError('UnknownTool')` to the console once. If the active tool leaves `tools`, the viewer switches to `select-text` and reports it through `update:tool`.
+`select-text` and `select` are always there. Every other tool is opt-in: pass the ones you offer through `tools`, from the tool factories in `@inkbar/core/dom`, or `allTools()` for all of them. A button for a tool you did not pass renders empty and disabled, and is hidden from assistive technology but still takes its place in the layout. The highlight, shape and signature menus render nothing. Each logs an `InkError('UnknownTool')` to the console once. If the active tool leaves `tools`, the viewer switches to `select-text` and reports it through `update:tool`.
 
 Each control is a separate component, so put them in any order or leave some out. Buttons show icons from `@inkbar/icons`. Put your own in a button's default slot to replace one, and use `InkIcon` to put the same icons on your own buttons. For a button of your own, such as `<InkToolbarButton @click="download">Download</InkToolbarButton>`, use `InkToolbarButton`: it joins the toolbar's arrow-key focus and looks like the other buttons.
 
-`v-model:annotations` makes your list the source of truth. Leave it off and Inkbar keeps the state itself, with undo and redo.
+`v-model:annotations` makes your list the source of truth. Leave it off and Inkbar keeps the state itself, with undo and redo on by default. In controlled mode undo and redo need `:history="true"`, as in the example; see Controlled mode.
+
+`InkRoot` also takes `password` for an encrypted file, `storage` for what the viewer keeps between visits (see [Storage](#storage)), `defaults` for annotation colours, `fonts` for the families the text style menu offers, `decorateAnnotation` (a `DecorateAnnotation` function that adds `data-*` attributes, classes and a screen-reader description to each annotation), and `v-model:tool`, `v-model:page` and `v-model:zoom`. It emits `ready` with the `InkDocument`, `error` with an `InkError`, `change` with each annotation change and `activate` with an annotation id. Its default slot receives `{ status, document }`.
+
+## Viewport
+
+`InkViewport` takes `mode`, `rotation`, `gap` (CSS pixels between pages, 16), `buffer` (pages kept mounted either side of the visible ones, 2) and `pinchZoom` (default `true`; `false` leaves pinches to the browser, which zooms the whole page). Changing `gap`, `buffer` or `pinchZoom` rebuilds the engine.
+
+On a touch screen, two fingers pinch to zoom the document and scroll it. With `draw`, `sketch`, `shape`, `redact-area` and `freetext`, one finger draws; a finger tap draws nothing, and a pen that lands while a palm rests on the screen takes over. A shape, area redaction or text box gives one-finger scrolling back once it has made something.
 
 ## Controlled mode
 
@@ -106,6 +115,10 @@ With `v-model:annotations`, Inkbar proposes each change through `update:annotati
 Undo and redo are off in controlled mode unless you pass `:history="true"`. Inkbar then keeps a stack of your list's past values and applies undo and redo through `v-model`. Every change to the list is a step, including the list you load from your server when the document opens. Clear the history once that load has reached the viewer, so the first undo does not empty the list:
 
 ```ts
+import { nextTick, useTemplateRef } from 'vue'
+import type { InkDocument } from '@inkbar/core'
+
+// <InkRoot ref="root" @ready="onReady" ...>
 const root = useTemplateRef<InstanceType<typeof InkRoot>>('root')
 
 async function onReady(doc: InkDocument) {
@@ -121,7 +134,7 @@ Inside `InkRoot`, `useHistory()` returns the same object. Its `batch(fn)` runs `
 
 ## Forms
 
-`InkViewport` fills the PDF's form fields and runs the form's scripts. `useForm()` returns the fields, their values, and `set` and `reset`. Bind `v-model:fields` to hold the values in your own state. The form never submits, opens a link, sends mail or prints: `@form-action` hands each request to you. `:form-highlight="false"` turns off the field tint, and a change applies to the open document in place.
+`InkViewport` fills the PDF's form fields and runs the form's scripts; the form props belong to `InkRoot`. `useForm()` returns the fields, their values, and `set` and `reset`. Bind `v-model:fields` on `InkRoot` to hold the values in your own state. The form never submits, opens a link, sends mail or prints: `@action` on `InkRoot` hands each request to you; so does a link to a URL. `@form-action` still works until 0.13.0. `:form-highlight="false"` turns off the field tint, and a change applies to the open document in place. A form script that fails is reported through `InkRoot`'s `error` event.
 
 The [forms guide](https://inkbar.dev/docs/guides/forms/) covers controlled fields, form actions, scripts, signature fields and saving values as Gloss.
 
@@ -131,11 +144,24 @@ The [forms guide](https://inkbar.dev/docs/guides/forms/) covers controlled field
 
 A root note with no text and no replies is removed when its popover closes, or when activation moves to another annotation, so abandoned notes do not stay on the page. A highlight stays: the mark is the point. Locked annotations are never removed. If you add notes yourself (`add({ type: 'text', ... })`), give them `contents`, or they will be removed the first time someone opens and closes them.
 
-The highlight tool leaves `contents` free for the comment. `doc.text(page)` returns the page's text items; match the markup's `quads` against them to get the marked text. `InkHighlightMenu` is a split button for the tool: it picks the markup kind and its colour.
+The highlight tool leaves `contents` free for the comment. `await doc.text(page)` returns the page's text content; match the markup's `quads` against its `items` to get the marked text. `InkHighlightMenu` is a split button for the tool: it picks the markup kind and its colour.
 
 ## Signatures
 
-`InkSignatureMenu` lists saved signatures, picks one for the `signature` tool, removes them, and opens `InkSignatureDialog` to draw, type or upload a new one. The menu needs `signatureTool()` in `tools`. The dialog and signature form fields work without it; the dialog then only saves the signature. These are marks on the page, not cryptographic signatures. Pass `signatures` to `InkRoot` to keep them somewhere: `createLocalSignatureStore(key)` from `@inkbar/core` uses `localStorage`, and without it they last until reload. `signatureFonts` lists the handwriting fonts the Type tab offers; load them with `@font-face`. A placed signature keeps its aspect ratio when resized.
+`InkSignatureMenu` lists saved signatures, picks one for the `signature` tool, removes them, and opens `InkSignatureDialog` to draw, type or upload a new one. The menu needs `signatureTool()` in `tools`. The dialog and signature form fields work without it; the dialog then only saves the signature. These are marks on the page, not cryptographic signatures. `InkRoot` keeps them in its `storage` under the key `signatures`, so without a store they last until reload. A `signatures` store of your own still works and wins over `storage` until 0.13.0, which removes it. `signatureFonts` lists the handwriting fonts the Type tab offers; load them with `@font-face`. A placed signature keeps its aspect ratio when resized.
+
+## Storage
+
+`InkRoot` keeps a few small things between visits: saved signatures, sidebar widths and plugin settings. Pass `storage` to choose where. `createLocalStorage()` from `@inkbar/core` keeps them in `localStorage`, and any `InkStorage` works, including an async one that talks to your server. The default is `createMemoryStorage()`, which forgets everything on reload. Inkbar never touches `localStorage`, cookies or the network unless the store you pass does. The root reads `storage` once, when it is created. See the [`@inkbar/core` README](https://github.com/inkbar/inkbar/tree/main/packages/core#storage) for the keys.
+
+```vue
+<script setup lang="ts">
+import { createLocalStorage } from '@inkbar/core'
+const storage = createLocalStorage()
+</script>
+
+<InkRoot :src="src" :assets="assets" :storage="storage">
+```
 
 ## Plugins
 
@@ -157,13 +183,17 @@ Plugin stores undo with annotations. In controlled mode with `:history="true"`,
 
 ## Search
 
-`InkFindBar` is the find bar and `InkSearchButton` opens it. Place the bar anywhere inside `InkRoot`, once `InkViewport` is there; Ctrl/Cmd+F opens it while it is mounted. `useSearch()` returns the search `state` and its actions (`open`, `setQuery`, `setMatchCase`, `next`, `previous`, `close`) for your own control. See the [`@inkbar/core` README](https://github.com/inkbar/inkbar/tree/main/packages/core#search) for the API.
+`InkFindBar` is the find bar and `InkSearchButton` opens it. Place the bar anywhere inside `InkRoot`, once `InkViewport` is there; Ctrl/Cmd+F opens it while it is mounted. `useSearch()` returns the search `state` and its actions (`open(query?)`, `setQuery`, `setMatchCase`, `next`, `previous`, `select(index)`, `close`) for your own control. See the [`@inkbar/core` README](https://github.com/inkbar/inkbar/tree/main/packages/core#search) for the API.
 
 ## Sidebars
 
-`InkSidebar` holds `InkPanel`s and places nothing itself: put it beside `InkViewport` with your own flex or grid layout. Each panel has an `id`, a `label`, an optional `icon` (an `IconNode` from `@inkbar/icons`) and an optional `badge`, a number or short string hidden when empty or 0. Its default slot is the panel's content, your own component or one of Inkbar's.
+`InkSidebar` holds `InkPanel`s and places nothing itself: put it beside `InkViewport` with your own flex or grid layout. Each panel has an `id`, a `label`, an optional `icon` (an `IconNode` from `@inkbar/icons`, which you install alongside `@inkbar/vue`) and an optional `badge`, a number or short string hidden when empty or 0. Its default slot is the panel's content, your own component or one of Inkbar's.
 
 ```vue
+<script setup lang="ts">
+import { Square, MessageSquare } from '@inkbar/icons'
+</script>
+
 <InkRoot :src="src" :assets="assets">
   <div class="app">
     <InkSidebar side="left" layout="rail" v-model:open="open">
@@ -181,7 +211,13 @@ Plugin stores undo with annotations. In controlled mode with `:history="true"`,
 
 `layout` is `rail` (default: icon buttons beside the document, and activating the open panel's button closes it), `tabs` (labelled tabs, one panel open) or `stack` (a header per panel, any number expanded). `side` (`left` by default) decides which edge the rail and border sit on. `v-model:open` is the open panel's id, or `null`, for rail and tabs, and the expanded ids for stack. Left unbound, the first panel starts open. When the open panel goes (a `v-if`), rail and tabs open the first one left and stack drops it, and `v-model:open` receives the new value. In the rail, the open panel shows its label as a title above its content. `visible` (default `true`) shows or hides the whole sidebar; it keeps the open panel, its content and its scroll for when it shows again. Your code decides when: `:visible="hits > 0"` keeps a results sidebar out of the way until a search finds something.
 
-Panels take their place in the order they appear in the template, including one added later with `v-if`. A closed panel stays mounted and hidden, so its content keeps its state and scroll position, across layout changes too. The keys and ARIA are core's: see the [`@inkbar/core` README](https://github.com/inkbar/inkbar/tree/main/packages/core#sidebars). The sidebar needs no document and works outside `InkRoot`. On the server it renders its frame with the open panel showing, and the stack headers; rail and tab buttons follow once it has mounted.
+Panels take their place in the order they appear in the template, including one added later with `v-if`. A closed panel stays mounted and hidden, so its content keeps its state and scroll position, across layout changes too. The keys and ARIA are core's: see the [`@inkbar/core` README](https://github.com/inkbar/inkbar/tree/main/packages/core#sidebars). The sidebar needs no document and works outside `InkRoot`. On the server it renders its frame at its width with the open panel showing, the stack headers and the resize handle; rail and tab buttons follow once it has mounted.
+
+Each sidebar has a resize handle on its inner edge. Drag it, or focus it and use the arrow keys (16px a step), Home and End. Enter or a double-click resets the width. The width starts at `defaultWidth` (320) and stays between `minWidth` (240) and `maxWidth` (480), and never past half of the sidebar's container. The sidebar sets `--ink-sidebar-width` inline, so a CSS override of it no longer applies. Pass `defaultWidth` instead. Inside `InkRoot` the sidebar saves its width in the root's `storage` under `sidebar.<name>.width`, where `name` defaults to the side; give two sidebars on one side different names. Pass `storage` to the sidebar to use another store, or to save its width outside `InkRoot`. The sidebar reads `storage` and `name` once, when it is created. `v-model:width` hands you the width: bind it to a number. The handle then only updates the model, and the sidebar neither reads nor writes storage. A model that starts `undefined` becomes controlled after the first change and stops saving.
+
+```vue
+<InkSidebar name="tools" side="right" :default-width="360" v-model:width="toolsWidth">
+```
 
 ## Thumbnails
 
@@ -199,6 +235,20 @@ Panels take their place in the order they appear in the template, including one
 
 An item's height is worked out from its page alone, so position what you add absolutely. The `item` slot renders inside the item's `<button>`: keep it non-interactive, with no links, buttons or inputs. Both need `InkRoot` and render empty on the server.
 
+## Outline and Back
+
+`InkOutline` shows the document's outline as a tree. Clicking an item, or Enter on it, follows it: a destination scrolls there (without changing the zoom), a web address goes to the host as an `open-url` action. The chevron expands and collapses an item without following it. The item the reader has reached is marked `aria-current="location"` and kept in view. It fills its parent's height and scrolls, so put it in a panel:
+
+```vue
+<InkPanel id="outline" label="Outline" :icon="List">
+  <InkOutline empty-text="No outline" />
+</InkPanel>
+```
+
+`empty-text` is shown when the document has no outline. The `item` slot, given `{ item, current, expanded }`, replaces an item's title. The keys and ARIA are core's, as in the thumbnails. Needs `InkRoot`; the tree renders empty on the server.
+
+`InkBack` and `InkForward` return to where the view was before a jump (a link, an outline item) and undo that. Each is disabled until there is somewhere to go, and takes `as-child`. Put them in an `InkToolbar`.
+
 ## Record lists
 
 `InkRecordList` lists a plugin's records as cards, the same cards their marks open, with the same actions. Name the records `<plugin>.<name>`:
@@ -219,11 +269,11 @@ To build your own, `useRecords<T>(name)` returns the live `records` and the `han
 
 ## Custom rendering
 
-Slots let you render parts yourself. `InkViewport` has `loading`, `empty`, `error`, `annotation` and `page-error` slots. `InkThreadPopover` has a scoped default slot that receives the popover's props, and the default slot of `InkToolButton` receives `{ active, label }`. The props are typed as `AnnotationSlotProps` and `ThreadPopoverSlotProps`, the same types the React and Svelte packages export.
+Slots let you render parts yourself. `InkViewport` has `loading`, `empty`, `error`, `annotation` and `page-error` slots. `InkThreadPopover` has a scoped default slot that receives `{ root, replies, reply, update, remove, close }`, and the default slot of `InkToolButton` receives `{ active, label }`. The props are typed as `AnnotationSlotProps` and `ThreadPopoverSlotProps`, the same types the React and Svelte packages export.
 
 `InkDownloadButton` and `InkPrintButton` download and print the open PDF; `filename` names the download (the opened `File`'s name, else the URL's last segment, else `document.pdf`). Printing loads the file into a hidden frame and opens the browser's print dialog for it; on iOS the PDF opens in a new tab instead. Until saving into the PDF ships, both give the file as it was opened, without this session's annotations.
 
-`InkRoot`, `InkToolbar`, `InkToolButton`, `InkCommand`, `InkUndo`, `InkRedo`, `InkDownloadButton`, `InkPrintButton`, `InkPrevPage`, `InkNextPage`, `InkZoomIn` and `InkZoomOut` take `as-child` to render your own element in place of theirs, such as a button from your design system. Put that element in the default slot. The control keeps its behaviour and accessible name.
+`InkRoot`, `InkToolbar`, `InkToolButton`, `InkCommand`, `InkUndo`, `InkRedo`, `InkDownloadButton`, `InkPrintButton`, `InkPrevPage`, `InkNextPage`, `InkBack`, `InkForward`, `InkZoomIn`, `InkZoomOut`, `InkSearchButton` and `InkToolbarButton` take `as-child` to render your own element in place of theirs, such as a button from your design system. Put that element in the default slot. The control keeps its behaviour and accessible name.
 
 ## Keyboard
 
@@ -237,21 +287,26 @@ The scroll area takes focus. From there:
 
 On a focused annotation:
 
-- `Enter` or `Space` selects and activates it. A note or text markup opens its thread; other types are only selected.
+- `Enter` or `Space` selects and activates it. A note or text markup opens its thread; other types are only selected. `Enter` on an editable text box opens its editor instead.
 - `ArrowUp` and `ArrowDown` move to the previous or next annotation on the page.
 - `Shift` + arrow moves it by 1 pt, or by 10 pt with `Alt` as well.
 - `Ctrl` or `Cmd` + `Shift` + arrow resizes an area redaction, text box or shape.
 - `Delete` or `Backspace` removes it.
+- `Escape` clears the selection.
 
 The full table, with the zoom and page keys, is in the [`@inkbar/core` README](https://github.com/inkbar/inkbar/tree/main/packages/core#tools-and-keyboard).
 
+## Style menus
+
+`InkColorMenu` (with `property="border"`, `"fill"` or `"text"`), `InkLineStyleMenu` (weight, dashes, arrowheads) and `InkTextStyleMenu` (font, size, colour, bold, italic, underline, alignment) edit the selection, or the active tool's style when nothing is selected. They disable when nothing supports their properties. `InkShapeMenu` is a split button for the `shape` tool and renders nothing unless `shapeTool` is in `tools`. `fonts` on `InkRoot` sets the families the text style menu offers.
+
 ## Styling
 
 Components carry state on data attributes, for example `[data-annotation][data-state="selected"]` and `[data-tool="highlight"][data-state="on"]`. `@inkbar/theme` gives a default look. Your own CSS overrides it without `!important`.
 
 ## Composables
 
-`useDocument`, `useAnnotations`, `useTool`, `useSelection`, `useZoom`, `usePage`, `useHistory`, `useEmbedded`, `useCommand`, `useRecords` and `useRecordSelection` read the state of the nearest `InkRoot`. Build your own toolbar or side panel from them. Tool options, such as the shape kind, last as long as `InkRoot`. The tool style that `useToolStyle` reads and sets (colours, line style, text style) belongs to the document: opening another one starts again from the theme's defaults.
+`useDocument`, `useAnnotations`, `useTool`, `useSelection`, `useZoom`, `usePage`, `useHistory`, `useEmbedded`, `useCommand`, `useRecords`, `useRecordSelection`, `useSearch`, `useForm`, `useToolStyle` and `useToolOptions` read the state of the nearest `InkRoot`. Build your own toolbar or side panel from them. `useToolOptions(id)` reads and sets a tool's options, such as the shape kind, without switching tools; they last as long as `InkRoot`. The tool style that `useToolStyle` reads and sets (colours, line style, text style) belongs to the document: opening another one starts again from the theme's defaults.
 
 ## Licence
 

package/dist/components/InkBack.js

@@ -0,0 +1,7 @@
+import e from "./InkBack.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/InkBack.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=InkBack.js.map

package/dist/components/InkBack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkBack.js","names":["_sfc_main","InkBack_vue_vue_type_script_setup_true_lang_default","InkBack_default"],"sources":["../../src/components/InkBack.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ArrowLeft } from '@inkbar/icons'\nimport { ToolbarButton } from 'reka-ui'\n\nimport { injectInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst ctx = injectInkContext()\n// Returns to where the view was before the last jump; disabled while there is nowhere to go.\nconst canGoBack = useReadable<boolean>(\n  () => ctx.navigation.value?.canGoBack ?? null,\n  false\n)\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Back',\n  title: 'Back',\n  onClick: () => ctx.navigation.value?.back(),\n}\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    :disabled=\"!canGoBack\"\n    class=\"ink-back\"\n    data-ink-back\n    v-bind=\"attrs\"\n  >\n    <slot><InkIcon :icon=\"ArrowLeft\" /></slot>\n  </ToolbarButton>\n</template>\n"],"mappings":""}

package/dist/components/InkBack.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    asChild?: boolean;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=InkBack.vue.d.ts.map

package/dist/components/InkBack.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkBack.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkBack.vue"],"names":[],"mappings":"AA8CA,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AA8DzC,QAAA,IAAI,OAAO,IAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkBack.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,34 @@
+import { injectInkContext as e } from "../context.js";
+import { useReadable as t } from "../use-readable.js";
+import n from "./InkIcon.js";
+import { createBlock as r, createVNode as i, defineComponent as a, mergeProps as o, openBlock as s, renderSlot as c, unref as l, withCtx as u } from "vue";
+import { ToolbarButton as d } from "reka-ui";
+import { ArrowLeft as f } from "@inkbar/icons";
+//#region src/components/InkBack.vue?vue&type=script&setup=true&lang.ts
+var p = /*@__PURE__*/ a({
+	__name: "InkBack",
+	props: { asChild: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(a) {
+		let p = e(), m = t(() => p.navigation.value?.canGoBack ?? null, !1), h = {
+			"aria-label": "Back",
+			title: "Back",
+			onClick: () => p.navigation.value?.back()
+		};
+		return (e, t) => (s(), r(l(d), o({
+			"as-child": a.asChild,
+			disabled: !l(m),
+			class: "ink-back",
+			"data-ink-back": ""
+		}, h), {
+			default: u(() => [c(e.$slots, "default", {}, () => [i(n, { icon: l(f) }, null, 8, ["icon"])])]),
+			_: 3
+		}, 16, ["as-child", "disabled"]));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=InkBack.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/InkBack.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkBack.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_withCtx","_renderSlot","_createVNode","InkIcon","InkIcon_default","InkBack_vue_vue_type_script_setup_true_lang_default","ctx","injectInkContext","canGoBack","useReadable","attrs","openBlock","createBlock","unref","ToolbarButton","mergeProps","__props","withCtx","renderSlot","_ctx","createVNode","ArrowLeft"],"sources":["../../src/components/InkBack.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ArrowLeft } from '@inkbar/icons'\nimport { ToolbarButton } from 'reka-ui'\n\nimport { injectInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst ctx = injectInkContext()\n// Returns to where the view was before the last jump; disabled while there is nowhere to go.\nconst canGoBack = useReadable<boolean>(\n  () => ctx.navigation.value?.canGoBack ?? null,\n  false\n)\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Back',\n  title: 'Back',\n  onClick: () => ctx.navigation.value?.back(),\n}\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    :disabled=\"!canGoBack\"\n    class=\"ink-back\"\n    data-ink-back\n    v-bind=\"attrs\"\n  >\n    <slot><InkIcon :icon=\"ArrowLeft\" /></slot>\n  </ToolbarButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAUA,IAAMU,IAAMC,EAAiB,GAEvBC,IAAYC,QACVH,EAAI,WAAW,OAAO,aAAa,MACzC,EACF,GAEMI,IAAQ;GACZ,cAAc;GACd,OAAO;GACP,eAAeJ,EAAI,WAAW,OAAO,KAAK;EAC5C;oBAIEV,EAAA,GAAAC,EAQgBC,EAAAgB,CAAA,GARhBf,EAQgB;GAPb,YAAUiB,EAAA;GACV,UAAQ,CAAGlB,EAAAU,CAAA;GACZ,OAAM;GACN,iBAAA;EACQ,GAAAE,CAAK,GAAA;GAEb,SAAAV,QAA0C,CAA1CC,EAA0CkB,EAAA,QAAA,WAAA,CAAA,SAAA,CAApCjB,EAA6BC,GAAA,EAAnB,MAAML,EAAAuB,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/InkForward.js

@@ -0,0 +1,7 @@
+import e from "./InkForward.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/InkForward.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=InkForward.js.map

package/dist/components/InkForward.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkForward.js","names":["_sfc_main","InkForward_vue_vue_type_script_setup_true_lang_default","InkForward_default"],"sources":["../../src/components/InkForward.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ArrowRight } from '@inkbar/icons'\nimport { ToolbarButton } from 'reka-ui'\n\nimport { injectInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst ctx = injectInkContext()\n// Goes forward again after Back; disabled until Back is used.\nconst canGoForward = useReadable<boolean>(\n  () => ctx.navigation.value?.canGoForward ?? null,\n  false\n)\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Forward',\n  title: 'Forward',\n  onClick: () => ctx.navigation.value?.forward(),\n}\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    :disabled=\"!canGoForward\"\n    class=\"ink-forward\"\n    data-ink-forward\n    v-bind=\"attrs\"\n  >\n    <slot><InkIcon :icon=\"ArrowRight\" /></slot>\n  </ToolbarButton>\n</template>\n"],"mappings":""}

package/dist/components/InkForward.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    asChild?: boolean;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=InkForward.vue.d.ts.map

package/dist/components/InkForward.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkForward.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkForward.vue"],"names":[],"mappings":"AA8CA,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AA8DzC,QAAA,IAAI,OAAO,IAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkForward.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,34 @@
+import { injectInkContext as e } from "../context.js";
+import { useReadable as t } from "../use-readable.js";
+import n from "./InkIcon.js";
+import { createBlock as r, createVNode as i, defineComponent as a, mergeProps as o, openBlock as s, renderSlot as c, unref as l, withCtx as u } from "vue";
+import { ToolbarButton as d } from "reka-ui";
+import { ArrowRight as f } from "@inkbar/icons";
+//#region src/components/InkForward.vue?vue&type=script&setup=true&lang.ts
+var p = /*@__PURE__*/ a({
+	__name: "InkForward",
+	props: { asChild: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(a) {
+		let p = e(), m = t(() => p.navigation.value?.canGoForward ?? null, !1), h = {
+			"aria-label": "Forward",
+			title: "Forward",
+			onClick: () => p.navigation.value?.forward()
+		};
+		return (e, t) => (s(), r(l(d), o({
+			"as-child": a.asChild,
+			disabled: !l(m),
+			class: "ink-forward",
+			"data-ink-forward": ""
+		}, h), {
+			default: u(() => [c(e.$slots, "default", {}, () => [i(n, { icon: l(f) }, null, 8, ["icon"])])]),
+			_: 3
+		}, 16, ["as-child", "disabled"]));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=InkForward.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/InkForward.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkForward.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_withCtx","_renderSlot","_createVNode","InkIcon","InkIcon_default","InkForward_vue_vue_type_script_setup_true_lang_default","ctx","injectInkContext","canGoForward","useReadable","attrs","openBlock","createBlock","unref","ToolbarButton","mergeProps","__props","withCtx","renderSlot","_ctx","createVNode","ArrowRight"],"sources":["../../src/components/InkForward.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ArrowRight } from '@inkbar/icons'\nimport { ToolbarButton } from 'reka-ui'\n\nimport { injectInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst ctx = injectInkContext()\n// Goes forward again after Back; disabled until Back is used.\nconst canGoForward = useReadable<boolean>(\n  () => ctx.navigation.value?.canGoForward ?? null,\n  false\n)\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Forward',\n  title: 'Forward',\n  onClick: () => ctx.navigation.value?.forward(),\n}\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    :disabled=\"!canGoForward\"\n    class=\"ink-forward\"\n    data-ink-forward\n    v-bind=\"attrs\"\n  >\n    <slot><InkIcon :icon=\"ArrowRight\" /></slot>\n  </ToolbarButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAUA,IAAMU,IAAMC,EAAiB,GAEvBC,IAAeC,QACbH,EAAI,WAAW,OAAO,gBAAgB,MAC5C,EACF,GAEMI,IAAQ;GACZ,cAAc;GACd,OAAO;GACP,eAAeJ,EAAI,WAAW,OAAO,QAAQ;EAC/C;oBAIEV,EAAA,GAAAC,EAQgBC,EAAAgB,CAAA,GARhBf,EAQgB;GAPb,YAAUiB,EAAA;GACV,UAAQ,CAAGlB,EAAAU,CAAA;GACZ,OAAM;GACN,oBAAA;EACQ,GAAAE,CAAK,GAAA;GAEb,SAAAV,QAA2C,CAA3CC,EAA2CkB,EAAA,QAAA,WAAA,CAAA,SAAA,CAArCjB,EAA8BC,GAAA,EAApB,MAAML,EAAAuB,CAAA,EAAU,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/InkOutline.js

@@ -0,0 +1,7 @@
+import e from "./InkOutline.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/InkOutline.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=InkOutline.js.map

package/dist/components/InkOutline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkOutline.js","names":["_sfc_main","InkOutline_vue_vue_type_script_setup_true_lang_default","InkOutline_default"],"sources":["../../src/components/InkOutline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The open document's outline as a tree: `createOutline`'s markup on core's outline controller,\n * which holds what is expanded, the Tab stop, the keys, the current item and Back's history.\n * Clicking an item, or Enter on it, follows it; its chevron expands and collapses it. It fills\n * its parent's height and scrolls, and keeps the item the reader has reached in view.\n *\n * The `item` slot, given `{ item, current, expanded }`, replaces an item's title. `emptyText`\n * is shown when the document has no outline. Inside `InkRoot`; the tree is empty on the server.\n */\nimport {\n  createOutlineController,\n  outlineTreeAttrs,\n  type OutlineController,\n} from '@inkbar/core/dom'\nimport { onBeforeUnmount, onMounted, shallowRef, useTemplateRef } from 'vue'\n\nimport { injectInkContext } from '../context'\nimport { toReadable } from '../to-readable'\n\nimport InkOutlineNodes from './InkOutlineNodes.vue'\n\nimport type { OutlineItem } from '@inkbar/core'\n\nwithDefaults(defineProps<{ emptyText?: string | undefined }>(), {\n  emptyText: 'This document has no outline',\n})\n\ndefineSlots<{\n  item?(props: { item: OutlineItem; current: boolean; expanded: boolean }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst deps = {\n  document: toReadable(() => ctx.document.value),\n  viewport: toReadable(() => ctx.viewport.value),\n  navigation: toReadable(() => ctx.navigation.value),\n}\n\n/** The tree's role and label, from core so every binding names it alike. */\nconst treeAttrs = outlineTreeAttrs()\n\n// The controller is built on mount, as the other controller-backed components do: it\n// subscribes to the document, so nothing is created while rendering on the server.\nconst controller = shallowRef<OutlineController | null>(null)\nconst items = shallowRef<readonly OutlineItem[]>([])\nconst loading = shallowRef(false)\nconst expanded = shallowRef<ReadonlySet<string>>(new Set())\nconst current = shallowRef<string | null>(null)\nconst focused = shallowRef<string | null>(null)\n\n/** The item's attributes. Reading the stores here makes a render follow them. */\nfunction attrs(id: string): Record<string, string | undefined> {\n  void [expanded.value, current.value, focused.value]\n  return controller.value?.itemAttrs(id) ?? {}\n}\n\nconst root = useTemplateRef<HTMLElement>('root')\nlet stops: (() => void)[] = []\nonMounted(() => {\n  const c = createOutlineController(deps)\n  controller.value = c\n  items.value = c.items.get()\n  loading.value = c.loading.get()\n  expanded.value = c.expanded.get()\n  current.value = c.current.get()\n  focused.value = c.focused.get()\n  stops = [\n    c.items.subscribe((v) => (items.value = v)),\n    c.loading.subscribe((v) => (loading.value = v)),\n    c.expanded.subscribe((v) => (expanded.value = v)),\n    c.current.subscribe((v) => (current.value = v)),\n    c.focused.subscribe((v) => (focused.value = v)),\n    c.bindScroll(root.value!),\n  ]\n})\nonBeforeUnmount(() => {\n  for (const stop of stops) stop()\n  stops = []\n  controller.value?.destroy()\n  controller.value = null\n})\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    class=\"ink-outline\"\n    data-ink-outline\n    :aria-busy=\"loading ? 'true' : undefined\"\n  >\n    <ul\n      class=\"ink-outline-tree\"\n      v-bind=\"treeAttrs\"\n      :hidden=\"items.length === 0\"\n      @keydown=\"controller?.onKeydown($event)\"\n    >\n      <InkOutlineNodes\n        v-if=\"controller\"\n        :items=\"items\"\n        :controller=\"controller\"\n        :attrs=\"attrs\"\n        :expanded=\"expanded\"\n        :current=\"current\"\n      >\n        <template v-if=\"$slots.item\" #item=\"slotProps\">\n          <slot name=\"item\" v-bind=\"slotProps\" />\n        </template>\n      </InkOutlineNodes>\n    </ul>\n    <p v-if=\"controller && !loading && items.length === 0\" class=\"ink-outline-empty\">\n      {{ emptyText }}\n    </p>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/InkOutline.vue.d.ts

@@ -0,0 +1,23 @@
+import { OutlineItem } from '@inkbar/core';
+type __VLS_Props = {
+    emptyText?: string | undefined;
+};
+type __VLS_Slots = {
+    item?(props: {
+        item: OutlineItem;
+        current: boolean;
+        expanded: boolean;
+    }): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    emptyText: string | undefined;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=InkOutline.vue.d.ts.map

package/dist/components/InkOutline.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkOutline.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkOutline.vue"],"names":[],"mappings":"AA0IA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAG/C,KAAK,WAAW,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAAC;AAKtD,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CAClF,CAAC;AAyIF,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkOutline.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,67 @@
+import { injectInkContext as e } from "../context.js";
+import { toReadable as t } from "../to-readable.js";
+import n from "./InkOutlineNodes.js";
+import { createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createSlots as s, defineComponent as c, guardReactiveProps as l, mergeProps as u, normalizeProps as d, onBeforeUnmount as f, onMounted as p, openBlock as m, renderSlot as h, shallowRef as g, toDisplayString as _, unref as v, useTemplateRef as y, withCtx as b } from "vue";
+import { createOutlineController as x, outlineTreeAttrs as S } from "@inkbar/core/dom";
+//#region src/components/InkOutline.vue?vue&type=script&setup=true&lang.ts
+var C = ["aria-busy"], w = ["hidden"], T = {
+	key: 0,
+	class: "ink-outline-empty"
+}, E = /*@__PURE__*/ c({
+	__name: "InkOutline",
+	props: { emptyText: { default: "This document has no outline" } },
+	setup(c) {
+		let E = e(), D = {
+			document: t(() => E.document.value),
+			viewport: t(() => E.viewport.value),
+			navigation: t(() => E.navigation.value)
+		}, O = S(), k = g(null), A = g([]), j = g(!1), M = g(/* @__PURE__ */ new Set()), N = g(null), P = g(null);
+		function F(e) {
+			return M.value, N.value, P.value, k.value?.itemAttrs(e) ?? {};
+		}
+		let I = y("root"), L = [];
+		return p(() => {
+			let e = x(D);
+			k.value = e, A.value = e.items.get(), j.value = e.loading.get(), M.value = e.expanded.get(), N.value = e.current.get(), P.value = e.focused.get(), L = [
+				e.items.subscribe((e) => A.value = e),
+				e.loading.subscribe((e) => j.value = e),
+				e.expanded.subscribe((e) => M.value = e),
+				e.current.subscribe((e) => N.value = e),
+				e.focused.subscribe((e) => P.value = e),
+				e.bindScroll(I.value)
+			];
+		}), f(() => {
+			for (let e of L) e();
+			L = [], k.value?.destroy(), k.value = null;
+		}), (e, t) => (m(), a("div", {
+			ref_key: "root",
+			ref: I,
+			class: "ink-outline",
+			"data-ink-outline": "",
+			"aria-busy": j.value ? "true" : void 0
+		}, [o("ul", u({ class: "ink-outline-tree" }, v(O), {
+			hidden: A.value.length === 0,
+			onKeydown: t[0] ||= (e) => k.value?.onKeydown(e)
+		}), [k.value ? (m(), r(n, {
+			key: 0,
+			items: A.value,
+			controller: k.value,
+			attrs: F,
+			expanded: M.value,
+			current: N.value
+		}, s({ _: 2 }, [e.$slots.item ? {
+			name: "item",
+			fn: b((t) => [h(e.$slots, "item", d(l(t)))]),
+			key: "0"
+		} : void 0]), 1032, [
+			"items",
+			"controller",
+			"expanded",
+			"current"
+		])) : i("", !0)], 16, w), k.value && !j.value && A.value.length === 0 ? (m(), a("p", T, _(c.emptyText), 1)) : i("", !0)], 8, C));
+	}
+});
+//#endregion
+export { E as default };
+
+//# sourceMappingURL=InkOutline.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/InkOutline.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkOutline.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","_unref","_createBlock","InkOutlineNodes","_createSlots","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode","_toDisplayString","InkOutlineNodes_default","_hoisted_1","_hoisted_2","_hoisted_3","InkOutline_vue_vue_type_script_setup_true_lang_default","ctx","injectInkContext","deps","toReadable","treeAttrs","outlineTreeAttrs","controller","shallowRef","items","loading","expanded","current","focused","attrs","id","root","useTemplateRef","stops","onMounted","c","createOutlineController","v","onBeforeUnmount","stop","openBlock","createElementBlock","createElementVNode","mergeProps","unref","_cache","$event","createBlock","createSlots","_ctx","withCtx","renderSlot","normalizeProps","guardReactiveProps","slotProps","createCommentVNode","toDisplayString","__props"],"sources":["../../src/components/InkOutline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The open document's outline as a tree: `createOutline`'s markup on core's outline controller,\n * which holds what is expanded, the Tab stop, the keys, the current item and Back's history.\n * Clicking an item, or Enter on it, follows it; its chevron expands and collapses it. It fills\n * its parent's height and scrolls, and keeps the item the reader has reached in view.\n *\n * The `item` slot, given `{ item, current, expanded }`, replaces an item's title. `emptyText`\n * is shown when the document has no outline. Inside `InkRoot`; the tree is empty on the server.\n */\nimport {\n  createOutlineController,\n  outlineTreeAttrs,\n  type OutlineController,\n} from '@inkbar/core/dom'\nimport { onBeforeUnmount, onMounted, shallowRef, useTemplateRef } from 'vue'\n\nimport { injectInkContext } from '../context'\nimport { toReadable } from '../to-readable'\n\nimport InkOutlineNodes from './InkOutlineNodes.vue'\n\nimport type { OutlineItem } from '@inkbar/core'\n\nwithDefaults(defineProps<{ emptyText?: string | undefined }>(), {\n  emptyText: 'This document has no outline',\n})\n\ndefineSlots<{\n  item?(props: { item: OutlineItem; current: boolean; expanded: boolean }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst deps = {\n  document: toReadable(() => ctx.document.value),\n  viewport: toReadable(() => ctx.viewport.value),\n  navigation: toReadable(() => ctx.navigation.value),\n}\n\n/** The tree's role and label, from core so every binding names it alike. */\nconst treeAttrs = outlineTreeAttrs()\n\n// The controller is built on mount, as the other controller-backed components do: it\n// subscribes to the document, so nothing is created while rendering on the server.\nconst controller = shallowRef<OutlineController | null>(null)\nconst items = shallowRef<readonly OutlineItem[]>([])\nconst loading = shallowRef(false)\nconst expanded = shallowRef<ReadonlySet<string>>(new Set())\nconst current = shallowRef<string | null>(null)\nconst focused = shallowRef<string | null>(null)\n\n/** The item's attributes. Reading the stores here makes a render follow them. */\nfunction attrs(id: string): Record<string, string | undefined> {\n  void [expanded.value, current.value, focused.value]\n  return controller.value?.itemAttrs(id) ?? {}\n}\n\nconst root = useTemplateRef<HTMLElement>('root')\nlet stops: (() => void)[] = []\nonMounted(() => {\n  const c = createOutlineController(deps)\n  controller.value = c\n  items.value = c.items.get()\n  loading.value = c.loading.get()\n  expanded.value = c.expanded.get()\n  current.value = c.current.get()\n  focused.value = c.focused.get()\n  stops = [\n    c.items.subscribe((v) => (items.value = v)),\n    c.loading.subscribe((v) => (loading.value = v)),\n    c.expanded.subscribe((v) => (expanded.value = v)),\n    c.current.subscribe((v) => (current.value = v)),\n    c.focused.subscribe((v) => (focused.value = v)),\n    c.bindScroll(root.value!),\n  ]\n})\nonBeforeUnmount(() => {\n  for (const stop of stops) stop()\n  stops = []\n  controller.value?.destroy()\n  controller.value = null\n})\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    class=\"ink-outline\"\n    data-ink-outline\n    :aria-busy=\"loading ? 'true' : undefined\"\n  >\n    <ul\n      class=\"ink-outline-tree\"\n      v-bind=\"treeAttrs\"\n      :hidden=\"items.length === 0\"\n      @keydown=\"controller?.onKeydown($event)\"\n    >\n      <InkOutlineNodes\n        v-if=\"controller\"\n        :items=\"items\"\n        :controller=\"controller\"\n        :attrs=\"attrs\"\n        :expanded=\"expanded\"\n        :current=\"current\"\n      >\n        <template v-if=\"$slots.item\" #item=\"slotProps\">\n          <slot name=\"item\" v-bind=\"slotProps\" />\n        </template>\n      </InkOutlineNodes>\n    </ul>\n    <p v-if=\"controller && !loading && items.length === 0\" class=\"ink-outline-empty\">\n      {{ emptyText }}\n    </p>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAgCA,IAAMoB,IAAMC,EAAiB,GACvBC,IAAO;GACX,UAAUC,QAAiBH,EAAI,SAAS,KAAK;GAC7C,UAAUG,QAAiBH,EAAI,SAAS,KAAK;GAC7C,YAAYG,QAAiBH,EAAI,WAAW,KAAK;EACnD,GAGMI,IAAYC,EAAiB,GAI7BC,IAAaC,EAAqC,IAAI,GACtDC,IAAQD,EAAmC,CAAC,CAAC,GAC7CE,IAAUF,EAAW,EAAK,GAC1BG,IAAWH,kBAAgC,IAAI,IAAI,CAAC,GACpDI,IAAUJ,EAA0B,IAAI,GACxCK,IAAUL,EAA0B,IAAI;EAG9C,SAASM,EAAM,GAAgD;GAE7D,OADAH,EAAe,OAAOC,EAAQ,OAAOC,EAAQ,OACtCN,EAAW,OAAO,UAAUQ,CAAE,KAAK,CAAC;EAC7C;EAEA,IAAMC,IAAOC,EAA4B,MAAM,GAC3CC,IAAwB,CAAC;SAC7BC,QAAgB;GACd,IAAMC,IAAIC,EAAwBlB,CAAI;GAOtC,AANA,EAAW,QAAQiB,GACnB,EAAM,QAAQA,EAAE,MAAM,IAAI,GAC1B,EAAQ,QAAQA,EAAE,QAAQ,IAAI,GAC9B,EAAS,QAAQA,EAAE,SAAS,IAAI,GAChC,EAAQ,QAAQA,EAAE,QAAQ,IAAI,GAC9B,EAAQ,QAAQA,EAAE,QAAQ,IAAI,GAC9B,IAAQ;IACNA,EAAE,MAAM,WAAW,MAAO,EAAM,QAAQE,CAAE;IAC1CF,EAAE,QAAQ,WAAW,MAAO,EAAQ,QAAQE,CAAE;IAC9CF,EAAE,SAAS,WAAW,MAAO,EAAS,QAAQE,CAAE;IAChDF,EAAE,QAAQ,WAAW,MAAO,EAAQ,QAAQE,CAAE;IAC9CF,EAAE,QAAQ,WAAW,MAAO,EAAQ,QAAQE,CAAE;IAC9CF,EAAE,WAAWJ,EAAK,KAAM;GAC1B;EACF,CAAC,GACDO,QAAsB;GACpB,KAAK,IAAMC,KAAQN,GAAO,EAAK;GAG/B,AAFA,IAAQ,CAAC,GACTX,EAAW,OAAO,QAAQ,GAC1B,EAAW,QAAQ;EACrB,CAAC,cAICzB,EAAA,GAAAC,EA4BM,OAAA;GA3BA,SAAA;GAAJ,KAAIiC;GACJ,OAAM;GACN,oBAAA;GACC,aAAWN,EAAA,QAAO,SAAY,KAAA;EAE/B1B,GAAAA,CAAAA,EAkBK,MAlBLC,EAkBK,EAjBH,OAAM,mBAAkB,GAChBC,EAAAmB,CAAA,GAAS;GAChB,QAAQI,EAAA,MAAM,WAAM;GACpB,WAAO,AAAAqB,EAAA,QAAA,MAAEvB,EAAA,OAAY,UAAUwB,CAAM;EAG9B,CAAA,GAAA,CAAAxB,EAAA,SADRzB,EAAA,GAAAK,EAWkBC,GAAA;;GATf,OAAOqB,EAAA;GACP,YAAYF,EAAA;GACL;GACP,UAAUI,EAAA;GACV,SAASC,EAAA;EAEM/B,GAAAA,EAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,EAAAA,OAAO,OAAA;GAAO,MAAA;GAC5B,IAAAS,GADkC,MAAS,CAC3CC,EAAuC2C,EAAA,QAAA,QAAA1C,EAAAC,EAAb8C,CAAS,CAAA,CAAA,CAAA,CAAA;;;;;;;EAIhC,CAAA,KAAAC,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA1C,CAAA,GAAAS,EAAA,SAAU,CAAKG,EAAA,SAAWD,EAAA,MAAM,WAAM,KAA/C3B,EAAA,GAAAC,EAEI,KAFJgB,GAEIJ,EADC+C,EAAA,SAAS,GAAA,CAAA,KAAAF,EAAA,IAAA,EAAA,CAAA,GAAA,GAAA3C,CAAA"}

package/dist/components/InkOutlineNodes.js

@@ -0,0 +1,7 @@
+import e from "./InkOutlineNodes.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/InkOutlineNodes.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=InkOutlineNodes.js.map

package/dist/components/InkOutlineNodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkOutlineNodes.js","names":["_sfc_main","InkOutlineNodes_vue_vue_type_script_setup_true_lang_default","InkOutlineNodes_default"],"sources":["../../src/components/InkOutlineNodes.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * One level of `InkOutline`'s tree, and below it the levels of the items that have children.\n * Internal: it renders the markup `OutlineController.itemAttrs` documents and spreads what the\n * controller gives it.\n */\nimport { ChevronRight } from '@inkbar/icons'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { OutlineItem } from '@inkbar/core'\nimport type { OutlineController } from '@inkbar/core/dom'\n\nconst props = defineProps<{\n  items: readonly OutlineItem[]\n  controller: OutlineController\n  /** Reads the controller's stores so a render follows them. */\n  attrs: (id: string) => Record<string, string | undefined>\n  expanded: ReadonlySet<string>\n  current: string | null\n}>()\n\nconst isOpen = (item: OutlineItem): boolean => props.expanded.has(item.id)\n\ndefineSlots<{\n  item?(props: { item: OutlineItem; current: boolean; expanded: boolean }): unknown\n}>()\n</script>\n\n<template>\n  <li\n    v-for=\"item in items\"\n    :key=\"item.id\"\n    class=\"ink-outline-item\"\n    :data-ink-outline-item=\"item.id\"\n    :data-bold=\"item.bold ? '' : undefined\"\n    :data-italic=\"item.italic ? '' : undefined\"\n    :style=\"{ '--ink-outline-level': item.id.split('.').length - 1 }\"\n    v-bind=\"attrs(item.id)\"\n  >\n    <div\n      class=\"ink-outline-row\"\n      v-bind=\"controller.rowAttrs(item.id)\"\n      @click=\"controller.activate(item.id)\"\n    >\n      <span\n        v-if=\"item.children.length > 0\"\n        class=\"ink-outline-toggle\"\n        aria-hidden=\"true\"\n        @click.stop=\"controller.toggle(item.id)\"\n      >\n        <InkIcon :icon=\"ChevronRight\" />\n      </span>\n      <span v-else class=\"ink-outline-spacer\" aria-hidden=\"true\" />\n      <span class=\"ink-outline-title\" v-bind=\"controller.titleAttrs(item.id)\">\n        <slot\n          name=\"item\"\n          :item=\"item\"\n          :current=\"current === item.id\"\n          :expanded=\"isOpen(item)\"\n        >\n          {{ item.title }}\n        </slot>\n      </span>\n    </div>\n    <ul\n      v-if=\"item.children.length > 0\"\n      class=\"ink-outline-group\"\n      role=\"group\"\n      :hidden=\"!expanded.has(item.id)\"\n    >\n      <InkOutlineNodes\n        :items=\"item.children\"\n        :controller=\"controller\"\n        :attrs=\"attrs\"\n        :expanded=\"expanded\"\n        :current=\"current\"\n      >\n        <template v-if=\"$slots.item\" #item=\"slotProps\">\n          <slot name=\"item\" v-bind=\"slotProps\" />\n        </template>\n      </InkOutlineNodes>\n    </ul>\n  </li>\n</template>\n"],"mappings":""}

package/dist/components/InkOutlineNodes.vue.d.ts

@@ -0,0 +1,27 @@
+import { OutlineItem } from '@inkbar/core';
+import { OutlineController } from '@inkbar/core/dom';
+type __VLS_Props = {
+    items: readonly OutlineItem[];
+    controller: OutlineController;
+    /** Reads the controller's stores so a render follows them. */
+    attrs: (id: string) => Record<string, string | undefined>;
+    expanded: ReadonlySet<string>;
+    current: string | null;
+};
+type __VLS_Slots = {
+    item?(props: {
+        item: OutlineItem;
+        current: boolean;
+        expanded: boolean;
+    }): unknown;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=InkOutlineNodes.vue.d.ts.map

package/dist/components/InkOutlineNodes.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkOutlineNodes.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkOutlineNodes.vue"],"names":[],"mappings":"AAgGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAGzD,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B,UAAU,EAAE,iBAAiB,CAAA;IAC7B,8DAA8D;IAC9D,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;IACzD,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC7B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB,CAAC;AAKF,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CAClF,CAAC;AA8HF,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkOutlineNodes.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,70 @@
+import e from "./InkIcon.js";
+import { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createSlots as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeProps as l, openBlock as u, renderList as d, renderSlot as f, resolveComponent as p, toDisplayString as m, unref as h, withCtx as g, withModifiers as _ } from "vue";
+import { ChevronRight as v } from "@inkbar/icons";
+//#region src/components/InkOutlineNodes.vue?vue&type=script&setup=true&lang.ts
+var y = [
+	"data-ink-outline-item",
+	"data-bold",
+	"data-italic"
+], b = ["onClick"], x = ["onClick"], S = {
+	key: 1,
+	class: "ink-outline-spacer",
+	"aria-hidden": "true"
+}, C = ["hidden"], w = /*@__PURE__*/ c({
+	__name: "InkOutlineNodes",
+	props: {
+		items: {},
+		controller: {},
+		attrs: { type: Function },
+		expanded: {},
+		current: {}
+	},
+	setup(c) {
+		let w = c, T = (e) => w.expanded.has(e.id);
+		return (w, E) => {
+			let D = p("InkOutlineNodes", !0);
+			return u(!0), r(t, null, d(c.items, (t) => (u(), r("li", l({
+				key: t.id,
+				class: "ink-outline-item",
+				"data-ink-outline-item": t.id,
+				"data-bold": t.bold ? "" : void 0,
+				"data-italic": t.italic ? "" : void 0,
+				style: { "--ink-outline-level": t.id.split(".").length - 1 }
+			}, { ref_for: !0 }, c.attrs(t.id)), [i("div", l({ class: "ink-outline-row" }, { ref_for: !0 }, c.controller.rowAttrs(t.id), { onClick: (e) => c.controller.activate(t.id) }), [t.children.length > 0 ? (u(), r("span", {
+				key: 0,
+				class: "ink-outline-toggle",
+				"aria-hidden": "true",
+				onClick: _((e) => c.controller.toggle(t.id), ["stop"])
+			}, [s(e, { icon: h(v) }, null, 8, ["icon"])], 8, x)) : (u(), r("span", S)), i("span", l({ class: "ink-outline-title" }, { ref_for: !0 }, c.controller.titleAttrs(t.id)), [f(w.$slots, "item", {
+				item: t,
+				current: c.current === t.id,
+				expanded: T(t)
+			}, () => [o(m(t.title), 1)])], 16)], 16, b), t.children.length > 0 ? (u(), r("ul", {
+				key: 0,
+				class: "ink-outline-group",
+				role: "group",
+				hidden: !c.expanded.has(t.id)
+			}, [s(D, {
+				items: t.children,
+				controller: c.controller,
+				attrs: c.attrs,
+				expanded: c.expanded,
+				current: c.current
+			}, a({ _: 2 }, [w.$slots.item ? {
+				name: "item",
+				fn: g((e) => [f(w.$slots, "item", l({ ref_for: !0 }, e))]),
+				key: "0"
+			} : void 0]), 1032, [
+				"items",
+				"controller",
+				"attrs",
+				"expanded",
+				"current"
+			])], 8, C)) : n("", !0)], 16, y))), 128);
+		};
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=InkOutlineNodes.vue_vue_type_script_setup_true_lang.js.map