@synopackageland/ui 0.25.10 → 0.25.12

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 ## Unreleased
 
+## 0.25.12 (2026-11-12)
+
+### Phone
+
+- **Back to the App list inside the Package Land phone app.** On a root page in the phone app (its bridge lists the `close` feature), the phone bar starts with a back arrow that asks the app to return to its App list; a browser, a sub-page and wider layouts never show it. When the page hides the bar, the first PageToolbar or SectionTabs row holds the button, so it costs no extra row; with no such row the bar is drawn for it. Apps need no change (docs/adaptive-layout.md)
+- **A sub-page's Back draws the shared arrow** instead of a chevron, matching the phone app's Back, and both Back buttons tint while pressed
+
+## 0.25.11 (2026-11-12)
+
+### Phone layout
+
+- **The soft keyboard stays up on Android.** AppRoot's focus handling called `focus()` on every pressed control during pointerdown. On Android Chrome and WebView, focusing a text field from script before the tap's own mousedown hides the keyboard it has just raised, and focus moves to the app root about 150ms later, so a chat composer could not be typed into. A press on a text field or inside editable content is now left to the browser; buttons, links and other controls are focused as before. Apps need no change
+- **Equal left and right margins on a touch phone.** The UI's styled `::-webkit-scrollbar` made Chromium (Android included) draw a classic 10px scrollbar inside every scroller, so pages, lists and toolbars ran 10px past the right margin. The webkit bar rules now apply only with a fine pointer; touch keeps the overlay bar, and Select and Combobox lists a thin one
+- **A natural-height list keeps its full width in a flex row.** The phone natural-height chain (`flex: 0 0 auto`, 0.25.8) shrank a pane in a flex row such as `ListDetail` to its content, so a list took half the screen. It now stretches to the row (`inline-size: stretch`), also in a flush BottomSheet
+- **Only actions float.** PageHeader, AppToolbar and PushTransition keep their actions in the page's own row, with no FAB or bar icons, while the actions hold anything that is not an action: a status badge, a count, a field. This includes content an App shell teleports in later. A status no longer floats as a pill over the list. Put a page's status in its meta (the SDK `PageInfo`)
+- **Toolbar actions wrap.** AppToolbar's actions row wraps within the page instead of pushing it into horizontal scroll
+- **Segmented controls of up to four segments are not cut.** A label wider than its share grows its column, and labels too wide together scroll the track sideways; none ends in an ellipsis
+- **A search field fills its row on a phone.** `SearchField` (now `data-ui-search-field`), alone or in a wrapper holding only it, grows to its row and ignores a fixed basis or `max-width`
+- **A DataGrid group title wraps in list mode.** A `#group-title` slot was wrapped in a `truncate` span, so a title with its own links ran over them on a narrow screen. It now wraps
+
+### Docs
+
+- Button policy and layout rules: a page's header actions (the SDK `AppShell`'s `#actions`, `PageHeader` `#actions`) hold only the page's own actions, such as Add. There is no page-wide refresh: a page reads its data again on `ctx.reopen` and when it is shown, and a failed read puts Retry next to its error. The demos no longer show one
+
 ## 0.25.10 (2026-11-12)
 
 ### Aside

package/dist/components/app/app-layout/BackArrowIcon.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    size?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/app/app-layout/MovableActions.d.ts

@@ -0,0 +1,35 @@
+import { PropType, VNode } from 'vue';
+/**
+ * True when `node` shows something that is not an action: text outside a
+ * button (a status badge, a count, a date) or a field. Neither belongs in a
+ * floating button or the 44px bar: there it would float over the page's rows.
+ */
+export declare function showsPassiveContent(node: Node): boolean;
+/**
+ * A page's actions on a phone (PageHeader, AppToolbar, PushTransition): in
+ * place, or teleported to `to` (the FAB or the phone bar). It reports
+ * `passive` while the actions hold anything that is not an action, whichever
+ * place they are in, so the owner keeps them in its own row and they never
+ * float over the page. Content that arrives later (a teleport of the App's
+ * own, as an App shell's page actions) is watched too.
+ */
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    to: {
+        type: PropType<HTMLElement | null>;
+        default: null;
+    };
+}>, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    passive: (value: boolean) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    to: {
+        type: PropType<HTMLElement | null>;
+        default: null;
+    };
+}>> & Readonly<{
+    onPassive?: ((value: boolean) => any) | undefined;
+}>, {
+    to: HTMLElement | null;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/app/app-layout/ShellBackButton.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/app/app-layout/back-arrow.json.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+  "name": "back-arrow",
+  "size": 24,
+  "stroke": 1.75,
+  "lines": [[5, 12, 19, 12], [5, 12, 11, 6], [5, 12, 11, 18]]
+}
+;
+
+export default _default;

package/dist/components/app/app-layout/shellBack.d.ts

@@ -0,0 +1,23 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+/**
+ * Back to the phone app's App list (docs/mobile-native.md, "Back to the App
+ * list"). On a root page AppLayout leads its phone bar with it. When that bar
+ * is not drawn (a tab page with `phone-bar-title="none"` and nothing else in
+ * the bar), the page's first row takes it instead: the first PageToolbar,
+ * SectionTabs row or PageHeader in the page, in document order, so it costs
+ * no row of its own. With no such row the bar is drawn for it.
+ */
+export interface ShellBackHost {
+    /** The page's first row should lead with Back. */
+    readonly wanted: Readonly<Ref<boolean>>;
+    /** The row that holds Back now (its registration), if any. */
+    readonly owner: Readonly<Ref<symbol | undefined>>;
+    /** Registers a row by a stable key, so a row whose element changes keeps its turn. */
+    register(key: symbol, element: () => HTMLElement | null | undefined): () => void;
+    refresh(): void;
+}
+export declare const APP_SHELL_BACK_KEY: InjectionKey<ShellBackHost>;
+/** AppLayout's side: the rows that could hold Back, and the one that does. */
+export declare function createShellBackHost(wanted: Readonly<Ref<boolean>>): ShellBackHost;
+/** A row's side: true while this row leads with Back. */
+export declare function useShellBackRow(element: () => HTMLElement | null | undefined): ComputedRef<boolean>;

package/dist/components/app/page-header/PageHeader.vue.d.ts

@@ -8,11 +8,9 @@ type __VLS_Props = {
     /** Where `#actions` go on a phone: `fab`, `bar` or `inline` (this header's row). Defaults to AppLayout's `phone-actions`. */
     phoneActions?: PhoneActionsPlacement;
 };
-declare var __VLS_19: {}, __VLS_27: {}, __VLS_29: {};
+declare var __VLS_19: {}, __VLS_29: {};
 type __VLS_Slots = {} & {
     meta?: (props: typeof __VLS_19) => any;
-} & {
-    actions?: (props: typeof __VLS_27) => any;
 } & {
     actions?: (props: typeof __VLS_29) => any;
 };

package/dist/components/app/page-toolbar/PageToolbar.vue.d.ts

@@ -1,8 +1,8 @@
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_6) => any;
 } & {
-    actions?: (props: typeof __VLS_3) => any;
+    actions?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/app/section-tabs/SectionTabs.vue.d.ts

@@ -31,15 +31,15 @@ type __VLS_Props = {
     /** On a phone's section list, whether the selected section is pushed (`v-model:pushed`). */
     pushed?: boolean;
 };
-declare var __VLS_8: {}, __VLS_35: {}, __VLS_44: `panel-${string}`, __VLS_45: {}, __VLS_48: `panel-${string}`, __VLS_49: {};
+declare var __VLS_8: {}, __VLS_42: {}, __VLS_51: `panel-${string}`, __VLS_52: {}, __VLS_55: `panel-${string}`, __VLS_56: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_44>]?: (props: typeof __VLS_45) => any;
+    [K in NonNullable<typeof __VLS_51>]?: (props: typeof __VLS_52) => any;
 } & {
-    [K in NonNullable<typeof __VLS_48>]?: (props: typeof __VLS_49) => any;
+    [K in NonNullable<typeof __VLS_55>]?: (props: typeof __VLS_56) => any;
 } & {
     actions?: (props: typeof __VLS_8) => any;
 } & {
-    actions?: (props: typeof __VLS_35) => any;
+    actions?: (props: typeof __VLS_42) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/dist/grid.js

@@ -3952,6 +3952,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
   "Free now {now}, free after {after}": "Free now {now}, free after {after}",
   Sections: "Sections",
   "Back to the previous page": "Back",
+  "Back to the App list": "Back to apps",
   "Page actions": "Page actions",
   Slider: "Slider",
   "Increase value": "Increase value",
@@ -4215,6 +4216,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "目前可用 {now}，清理後可用 {after}",
     Sections: "區段",
     "Back to the previous page": "返回",
+    "Back to the App list": "返回 App 列表",
     "Page actions": "頁面動作",
     Slider: "滑桿",
     "Increase value": "增加數值",
@@ -4477,6 +4479,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "当前可用 {now}，清理后可用 {after}",
     Sections: "区段",
     "Back to the previous page": "返回",
+    "Back to the App list": "返回应用列表",
     "Page actions": "页面操作",
     Slider: "滑块",
     "Increase value": "增加数值",
@@ -4739,6 +4742,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "現在の空き {now}、解放後の空き {after}",
     Sections: "セクション",
     "Back to the previous page": "戻る",
+    "Back to the App list": "アプリ一覧に戻る",
     "Page actions": "ページの操作",
     Slider: "スライダー",
     "Increase value": "値を増やす",
@@ -5001,6 +5005,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "현재 여유 공간 {now}, 정리 후 여유 공간 {after}",
     Sections: "섹션",
     "Back to the previous page": "뒤로",
+    "Back to the App list": "앱 목록으로 돌아가기",
     "Page actions": "페이지 작업",
     Slider: "슬라이더",
     "Increase value": "값 증가",
@@ -5263,6 +5268,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "Jetzt frei {now}, danach frei {after}",
     Sections: "Abschnitte",
     "Back to the previous page": "Zurück",
+    "Back to the App list": "Zurück zu den Apps",
     "Page actions": "Seitenaktionen",
     Slider: "Schieberegler",
     "Increase value": "Wert erhöhen",
@@ -5525,6 +5531,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "Libre maintenant {now}, libre ensuite {after}",
     Sections: "Sections",
     "Back to the previous page": "Retour",
+    "Back to the App list": "Retour aux applications",
     "Page actions": "Actions de la page",
     Slider: "Curseur",
     "Increase value": "Augmenter la valeur",
@@ -5787,6 +5794,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "Libre ahora {now}, libre después {after}",
     Sections: "Secciones",
     "Back to the previous page": "Atrás",
+    "Back to the App list": "Volver a las aplicaciones",
     "Page actions": "Acciones de la página",
     Slider: "Control deslizante",
     "Increase value": "Aumentar valor",
@@ -6049,6 +6057,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "Libero ora {now}, libero dopo {after}",
     Sections: "Sezioni",
     "Back to the previous page": "Indietro",
+    "Back to the App list": "Torna alle app",
     "Page actions": "Azioni della pagina",
     Slider: "Cursore",
     "Increase value": "Aumenta valore",

package/dist/i18n/text.d.ts

@@ -106,6 +106,7 @@ export declare const englishUiText: {
     readonly "Free now {now}, free after {after}": "Free now {now}, free after {after}";
     readonly Sections: "Sections";
     readonly "Back to the previous page": "Back";
+    readonly "Back to the App list": "Back to apps";
     readonly "Page actions": "Page actions";
     readonly Slider: "Slider";
     readonly "Increase value": "Increase value";