@staging-apiplus/essentials 0.0.2 → 0.0.4

package/README.md

@@ -1,31 +1,61 @@
 # `@staging-apiplus/essentials`
 
-First-party QuickPage code package: **gallery** (code component) and **slider** / **tab** (logic). Source for the **System library** snapshot (`@staging-apiplus/essentials`).
+First-party QuickPage code package: **gallery** (code component) and **slider** / **tab** (logic; `slider` never writes layout styles at runtime). Source for the **System library** snapshot (`@staging-apiplus/essentials`).
 
 ## Tooling dependencies
 
-| Context | `@packages/qp-sdk` / `@packages/qp-cli` |
+| Context | `@packages/qp-sdk` / `@packages/app-cli` |
 | --- | --- |
 | **Monorepo root** `pnpm install` | `workspace:@packages/qp-*@^0.0.1` — links in-tree packages (no Verdaccio required) |
-| **Registry-shaped** (same as external authors) | `make publish-qp-tooling-dev` with mock-registry up, then `pnpm install` in this folder — resolves via [`.npmrc`](../.npmrc) at `^0.0.1` |
+| **Registry-shaped** (same as external authors) | `make publish-code-packages-dev` with mock-registry up, then `pnpm install` in this folder — resolves via [`.npmrc`](../../.npmrc) at `^0.0.1` |
 
 No Node `imports` map to `packages/qp_sdk/src` — builds use published SDK layout like third-party packages.
 
 ## Commands
 
 ```bash
-pnpm run dev        # qp dev — playground + HMR (+ QuickPage Link dev for editor/preview)
-pnpm run build      # qp build → dist/ (also via make build-code-packages)
-pnpm run validate   # qp validate
+pnpm run dev        # apps dev — playground + HMR (+ QuickPage Link dev for editor/preview)
+pnpm run build      # apps build → dist/ (also via make build-code-packages)
+pnpm run validate   # apps validate
 pnpm run test:unit  # schema + DOM helper tests
 ```
 
+## Slider
+
+| Prop | Default | Behavior |
+| --- | --- | --- |
+| `loop` | `true` | Infinite loop in preview and on published pages. Next on the last slide moves on to the first one in the same direction, and Previous on the first moves back to the last. No slides are cloned: each slide is moved to the end of the track that is nearest to the active slide. The track needs at least two slides. Prev/next stay enabled at both ends. When `false`, the index clamps and prev/next are disabled at the ends. The editor canvas shows the chosen slide with no wrap animation. |
+| `speed` | `400` | Transition time in ms. |
+| `autoplay` / `autoplayDelay` | `false` / `3000` | Advances one slide per delay; follows `loop` at the last slide. |
+
+The runtime treats a missing `loop` as `true`, so attachments saved before the prop existed also loop. Designers toggle **Loop** in the slide settings panel; it writes `loop` through `libraryLogic.updateProps`.
+
+Designers toggle **Autoplay** and set **Speed** in the same panel. Autoplay writes `autoplay`; Speed writes `autoplayDelay` (the time between slides, not the `speed` transition time), clamped to a minimum of 500 ms, and is disabled while Autoplay is off.
+
+Swipe: in preview and published pages, dragging a slide along the slide axis (horizontal or vertical, from the wrapper's `flexDirection`) follows the pointer and settles on the next or previous slide when released past ~40px (a third of the slide for small slides); respects `loop`, pauses autoplay while dragging, and swallows the click that ends a drag. Starting across the axis scrolls the page (`touch-action` is set to `pan-y` / `pan-x`). Prev/next/pagination controls are not swipe handles. The editor canvas has no swipe, so selection and layer drags are unaffected.
+
+### Slide settings modal
+
+Opened from the slider's header button on the slider host. The slider declares it in `slider/editor/editor.ts` (`editorPanel.dialog`); QuickPage renders the generic logic editor dialog (`interaction/logic/editor_dialog/`), so its button, controls and slide list come from that declaration.
+
+| Behavior | Rule |
+| --- | --- |
+| Source | The top card shows the repeat source bound to the **first slide** (the repeated template), or **Non-sourced** when none. Clicking opens the Source picker (Variables / Components); the slide count follows the source. Shown even with no slides, but inert until a slide exists. |
+| Slides | List, reorder, rename, duplicate, set default, delete, and add run through the slider editor plugin actions; clicking a slide previews it on the canvas (cleared on close). |
+| Direction | The `setDirection` action writes `flexDirection` on the `wrapper` role node. |
+| Dragging | Drag by the title bar; clamped to the viewport; resets to the anchored position on reopen. |
+| Closing | The close button, or any selection change whose primary node is neither the slider host nor a descendant (slides keep it open; clearing the selection closes it). Wired in `SelectionState.#dismissSelectionScopedUi` through `logicEditorDialog`. |
+
+### Binding wires (Connect panel)
+
+The **Connect** button on a Logic row opens the Connect sub-panel (`interaction/logic/connect/logic_connect.svelte`), laid out like Repeater Connect (title "Connect <logic>", an Output count, then one row per wire). Each wiring key from the logic's wiring schema (e.g. slider wrapper, pagination) is a row showing the bound layer or **Not bound**. **Connect** / **Rebind** starts a canvas pick (button turns **Cancel** while picking; the next click on a layer inside the slider host binds it). The panel closes with the back button, or when the selection leaves the slider host (`closeSubPanelIfInvalid`); closing cancels any running pick. The old "Bind nodes" rows in the expanded Logic row were removed.
+
 ## Author documentation
 
 Lifecycle (editor / preview / published), SDK APIs, and logic tiers — applies to **all** code packages:
 
-**[Module author guide](../../docs/code-packages/guides/module-author.md)** — CE + `designTime` logic. In QuickPage, attach tab/slider via **Code → Logic → Apply** on wired chrome ([logic presets](../../docs/code-packages/guides/logic-presets.md)).
+**[Module author guide](../../../docs/code-packages/guides/module-author.md)** — CE + `designTime` logic. In QuickPage, attach tab/slider via **Code → Logic → Apply** on wired chrome ([logic presets](../../../docs/code-packages/guides/logic-presets.md)).
 
-**Dev (Tilt + isolate):** [consolidated dev flow](../../docs/code-packages/guides/development.md#consolidated-dev-flow-canonical) — **Link dev** for HMR; **`qp publish`** to dev registry then **Refresh in editor** / reload staging.
+**Dev (Tilt + isolate):** [consolidated dev flow](../../../docs/code-packages/guides/development.md#consolidated-dev-flow-canonical) — **Link dev** for HMR; **`apps publish`** to dev registry then **Refresh in editor** / reload staging.
 
-Broader context: [code packages hub](../../docs/code-packages/README.md), [artifact scenarios (all envs)](../../docs/code-packages/reference/artifact-scenarios.md), [author quickstart](../../packages/qp_sdk/docs/author-quickstart.md).
+Broader context: [code packages hub](../../../docs/code-packages/README.md), [artifact scenarios (all envs)](../../../docs/code-packages/reference/artifact-scenarios.md), [author quickstart](../../../packages/qp_sdk/docs/author-quickstart.md).

package/dist/{qp-package.json → app-package.json}

@@ -1,16 +1,14 @@
 {
+  "kind": "package",
   "id": "@staging-apiplus/essentials",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "engine": "^1.0.0",
   "framework": "svelte",
   "capabilities": [
     "document:component:render",
     "document:logic:mount",
-    "editor:plugin:load"
+    "editor:logic-editor:load"
   ],
-  "library": {
-    "category": "Custom"
-  },
   "modules": {
     "components": [
       {
@@ -38,15 +36,8 @@
           "items": {
             "content": {
               "list": "wrapper",
-              "hideInactive": true
-            },
-            "markers": {
-              "list": "pagination",
-              "template": "paginationDot",
-              "variables": [
-                "slideIndex",
-                "slideNumber"
-              ]
+              "item": "slide",
+              "shiftToActive": true
             },
             "add": {
               "label": "Add slide",
@@ -76,6 +67,9 @@
           "chromeNavigation": {
             "prevRole": "prev",
             "nextRole": "next"
+          },
+          "unboundRoleParents": {
+            "paginationDot": "pagination"
           }
         },
         "schema": "./dist/slider.schema.json",

package/dist/{derive_logic_editor_panel-D_bgZnMq.js → derive_logic_editor_panel-Bglc03KS.js}

@@ -1,14 +1,16 @@
-//#region ../../packages/qp_sdk/src/define/define_logic_editor.ts
+//#region ../../../packages/qp_sdk/src/define/define_logic_editor.ts
 function e(e) {
 	return {
 		kind: "logic-editor",
 		editorPanel: e.editorPanel,
 		mount: e.mount ?? (() => {}),
-		onAction: e.onAction
+		onAction: e.onAction,
+		onWireBound: e.onWireBound,
+		insert: e.insert
 	};
 }
 //#endregion
-//#region ../../packages/qp_sdk/src/editor/derive_logic_editor_panel.ts
+//#region ../../../packages/qp_sdk/src/editor/derive_logic_editor_panel.ts
 function t(e, t, n) {
 	if (!e?.items) return [];
 	let r = e.activeIndexStateKey, i = [], a = n?.includeSettings ?? !0, o = n?.includeStates ?? !0;
@@ -38,6 +40,7 @@ function t(e, t, n) {
 			id: "content-items",
 			label: e.items.add?.label ?? "Items",
 			role: t.contentRole,
+			parentRole: e.items.content.list,
 			activeStateKey: r,
 			suggestClass: n?.suggestClass,
 			actions: a

package/dist/{design_time-BeEBEFSF.js → design_time-Beb6A0O9.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./logic_role_kind-DV5olnbL.js";
+import { t as e } from "./logic_role_kind-BQg9qOUj.js";
 //#region src/tab/editor/roles.ts
 var t = {
 	Host: "tabs",

package/dist/{design_time-hqGakP97.js → design_time-Dxqanum8.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./logic_role_kind-DV5olnbL.js";
+import { t as e } from "./logic_role_kind-BQg9qOUj.js";
 //#region src/slider/editor/roles.ts
 var t = {
 	Host: "slider",
@@ -8,22 +8,27 @@ var t = {
 	PaginationDot: "paginationDot",
 	Prev: "prev",
 	Next: "next"
-};
-t.Wrapper, e.Container, t.Slide, e.Repeatable, t.Pagination, e.Control, t.PaginationDot, e.Repeatable, t.Prev, e.Control, t.Next, e.Control;
-//#endregion
-//#region src/slider/editor/design_time.ts
-var n = {
+}, n = {
+	[t.Wrapper]: {
+		kind: e.Container,
+		owns: [t.Slide]
+	},
+	[t.Slide]: { kind: e.Repeatable },
+	[t.Pagination]: {
+		kind: e.Control,
+		owns: [t.PaginationDot]
+	},
+	[t.PaginationDot]: { kind: e.Repeatable },
+	[t.Prev]: { kind: e.Control },
+	[t.Next]: { kind: e.Control }
+}, r = {
 	mode: "active-item",
 	activeIndexStateKey: "activeSlideIndex",
 	items: {
 		content: {
 			list: t.Wrapper,
-			hideInactive: !0
-		},
-		markers: {
-			list: t.Pagination,
-			template: t.PaginationDot,
-			variables: ["slideIndex", "slideNumber"]
+			item: t.Slide,
+			shiftToActive: !0
 		},
 		add: {
 			label: "Add slide",
@@ -41,7 +46,8 @@ var n = {
 	chromeNavigation: {
 		prevRole: t.Prev,
 		nextRole: t.Next
-	}
+	},
+	unboundRoleParents: { [t.PaginationDot]: t.Pagination }
 };
 //#endregion
-export { t as n, n as t };
+export { n, t as r, r as t };

package/dist/gallery/package.json

@@ -1,5 +1,5 @@
 {
-  "quickpage": {
+  "app": {
     "id": "gallery",
     "kind": "component",
     "name": "gallery"