sh3-core 0.22.2 → 0.22.5

package/dist/apps/types.d.ts

@@ -82,6 +82,10 @@ export interface AppManifest {
      * set the framework falls back to `box`.
      */
     icon?: string;
+    /**
+     * Optional default home-card color default to transparent if not set
+     */
+    color?: string;
 }
 /**
  * Context object passed to `App.activate`. Provides app-scoped state zones

package/dist/primitives/widgets/Field.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { LiveInputEvents } from './_contract';
+  import { selectOnPointerDown, selectOnFocusEvent } from './_selectOnFocus';
 
   let {
     value = $bindable(''),
@@ -16,6 +17,7 @@
     size = 'md',
     required = false,
     autocomplete,
+    selectOnFocus = false,
     oninput,
     onchange,
   }: {
@@ -32,6 +34,7 @@
     size?: 'sm' | 'md';
     required?: boolean;
     autocomplete?: AutoFill;
+    selectOnFocus?: boolean;
   } & LiveInputEvents<string> = $props();
 
   const showError = $derived(invalid && !!error);
@@ -53,6 +56,8 @@
       bind:value
       oninput={() => oninput?.(value)}
       onblur={() => onchange?.(value)}
+      onpointerdown={selectOnFocus ? selectOnPointerDown : undefined}
+      onfocus={selectOnFocus ? selectOnFocusEvent : undefined}
     />
     {#if suffix}<span class="sh3-field__affix">{@render suffix()}</span>{/if}
   </span>

package/dist/primitives/widgets/Field.svelte.d.ts

@@ -14,6 +14,7 @@ type $$ComponentProps = {
     size?: 'sm' | 'md';
     required?: boolean;
     autocomplete?: AutoFill;
+    selectOnFocus?: boolean;
 } & LiveInputEvents<string>;
 declare const Field: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Field = ReturnType<typeof Field>;

package/dist/primitives/widgets/Field.svelte.test.js

@@ -31,3 +31,19 @@ describe('Field event contract', () => {
         expect(getByText('Required')).toBeInTheDocument();
     });
 });
+describe('Field selectOnFocus opt-in', () => {
+    it('does not select on focus by default', async () => {
+        const { container } = render(Field, { props: { value: 'hello' } });
+        const input = container.querySelector('input');
+        const spy = vi.spyOn(input, 'select');
+        await fireEvent.focus(input);
+        expect(spy).not.toHaveBeenCalled();
+    });
+    it('selects on focus when selectOnFocus is true', async () => {
+        const { container } = render(Field, { props: { value: 'hello', selectOnFocus: true } });
+        const input = container.querySelector('input');
+        const spy = vi.spyOn(input, 'select');
+        await fireEvent.focus(input);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/primitives/widgets/NumberInput.svelte

@@ -2,6 +2,7 @@
   import type { Snippet } from 'svelte';
   import type { LiveInputEvents } from './_contract';
   import { clamp, applyStep } from './NumberInput';
+  import { selectOnPointerDown, selectOnFocusEvent } from './_selectOnFocus';
 
   let {
     value = $bindable(0),
@@ -15,6 +16,8 @@
     disabled = false,
     invalid = false,
     size = 'md',
+    steppers = false,
+    selectOnFocus = false,
     oninput,
     onchange,
   }: {
@@ -29,6 +32,8 @@
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
+    steppers?: boolean;
+    selectOnFocus?: boolean;
   } & LiveInputEvents<number> = $props();
 
   function commit(next: number) {
@@ -95,20 +100,24 @@
         commit(value);
         onchange?.(value);
       }}
+      onpointerdown={selectOnFocus ? selectOnPointerDown : undefined}
+      onfocus={selectOnFocus ? selectOnFocusEvent : undefined}
     />
     {#if suffix}<span class="sh3-num__affix">{@render suffix()}</span>{/if}
-    <span class="sh3-num__steppers">
-      <button type="button" {disabled}
-              onpointerdown={() => startHold(1)}
-              onpointerup={stopHold}
-              onpointerleave={stopHold}
-              aria-label="Increase">▲</button>
-      <button type="button" {disabled}
-              onpointerdown={() => startHold(-1)}
-              onpointerup={stopHold}
-              onpointerleave={stopHold}
-              aria-label="Decrease">▼</button>
-    </span>
+    {#if steppers}
+      <span class="sh3-num__steppers">
+        <button type="button" {disabled}
+                onpointerdown={() => startHold(1)}
+                onpointerup={stopHold}
+                onpointerleave={stopHold}
+                aria-label="Increase">▲</button>
+        <button type="button" {disabled}
+                onpointerdown={() => startHold(-1)}
+                onpointerup={stopHold}
+                onpointerleave={stopHold}
+                aria-label="Decrease">▼</button>
+      </span>
+    {/if}
   </span>
 </label>
 

package/dist/primitives/widgets/NumberInput.svelte.d.ts

@@ -12,6 +12,8 @@ type $$ComponentProps = {
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
+    steppers?: boolean;
+    selectOnFocus?: boolean;
 } & LiveInputEvents<number>;
 declare const NumberInput: import("svelte").Component<$$ComponentProps, {}, "value">;
 type NumberInput = ReturnType<typeof NumberInput>;

package/dist/primitives/widgets/NumberInput.svelte.test.js

@@ -46,3 +46,29 @@ describe('NumberInput event contract', () => {
         expect(onchange.mock.calls[0][0]).toBeCloseTo(1.23, 5);
     });
 });
+describe('NumberInput steppers opt-in', () => {
+    it('hides ▲▼ buttons by default', () => {
+        const { container } = render(NumberInput, { props: { value: 0 } });
+        expect(container.querySelectorAll('button').length).toBe(0);
+    });
+    it('renders ▲▼ buttons when steppers is true', () => {
+        const { container } = render(NumberInput, { props: { value: 0, steppers: true } });
+        expect(container.querySelectorAll('button').length).toBe(2);
+    });
+});
+describe('NumberInput selectOnFocus opt-in', () => {
+    it('does not select on focus by default', async () => {
+        const { container } = render(NumberInput, { props: { value: 42 } });
+        const input = container.querySelector('input');
+        const spy = vi.spyOn(input, 'select');
+        await fireEvent.focus(input);
+        expect(spy).not.toHaveBeenCalled();
+    });
+    it('selects on focus when selectOnFocus is true', async () => {
+        const { container } = render(NumberInput, { props: { value: 42, selectOnFocus: true } });
+        const input = container.querySelector('input');
+        const spy = vi.spyOn(input, 'select');
+        await fireEvent.focus(input);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/primitives/widgets/Textarea.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { LiveInputEvents } from './_contract';
+  import { selectOnPointerDown, selectOnFocusEvent } from './_selectOnFocus';
 
   let {
     value = $bindable(''),
@@ -13,6 +14,7 @@
     required = false,
     rows = 3,
     resize = 'vertical',
+    selectOnFocus = false,
     oninput,
     onchange,
   }: {
@@ -27,6 +29,7 @@
     required?: boolean;
     rows?: number;
     resize?: 'none' | 'vertical' | 'both';
+    selectOnFocus?: boolean;
   } & LiveInputEvents<string> = $props();
 
   const showError = $derived(invalid && !!error);
@@ -46,6 +49,8 @@
     bind:value
     oninput={() => oninput?.(value)}
     onblur={() => onchange?.(value)}
+    onpointerdown={selectOnFocus ? selectOnPointerDown : undefined}
+    onfocus={selectOnFocus ? selectOnFocusEvent : undefined}
   ></textarea>
   {#if helperText}<span class="sh3-textarea__helper" class:sh3-textarea__helper--error={showError}>{helperText}</span>{/if}
 </label>

package/dist/primitives/widgets/Textarea.svelte.d.ts

@@ -11,6 +11,7 @@ type $$ComponentProps = {
     required?: boolean;
     rows?: number;
     resize?: 'none' | 'vertical' | 'both';
+    selectOnFocus?: boolean;
 } & LiveInputEvents<string>;
 declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Textarea = ReturnType<typeof Textarea>;

package/dist/primitives/widgets/Textarea.svelte.test.js

@@ -27,3 +27,19 @@ describe('Textarea event contract', () => {
         expect(ta.style.resize).toBe('none');
     });
 });
+describe('Textarea selectOnFocus opt-in', () => {
+    it('does not select on focus by default', async () => {
+        const { container } = render(Textarea, { props: { value: 'hello' } });
+        const ta = container.querySelector('textarea');
+        const spy = vi.spyOn(ta, 'select');
+        await fireEvent.focus(ta);
+        expect(spy).not.toHaveBeenCalled();
+    });
+    it('selects on focus when selectOnFocus is true', async () => {
+        const { container } = render(Textarea, { props: { value: 'hello', selectOnFocus: true } });
+        const ta = container.querySelector('textarea');
+        const spy = vi.spyOn(ta, 'select');
+        await fireEvent.focus(ta);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/primitives/widgets/_selectOnFocus.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared "select content on focus" opt-in handlers for keystroke widgets
+ * (Field, Textarea, NumberInput).
+ *
+ * Two paths:
+ *  - pointer click on an unfocused input: preventDefault on pointerdown to
+ *    suppress native caret placement, then focus() + select() ourselves.
+ *    Clicking again while already focused falls through to normal caret
+ *    placement, so users can still edit a single character.
+ *  - tab / label click: onfocus selects all.
+ *
+ * Internal — not exported from api.ts.
+ */
+export declare function selectOnPointerDown(e: PointerEvent): void;
+export declare function selectOnFocusEvent(e: FocusEvent): void;

package/dist/primitives/widgets/_selectOnFocus.js

@@ -0,0 +1,24 @@
+/**
+ * Shared "select content on focus" opt-in handlers for keystroke widgets
+ * (Field, Textarea, NumberInput).
+ *
+ * Two paths:
+ *  - pointer click on an unfocused input: preventDefault on pointerdown to
+ *    suppress native caret placement, then focus() + select() ourselves.
+ *    Clicking again while already focused falls through to normal caret
+ *    placement, so users can still edit a single character.
+ *  - tab / label click: onfocus selects all.
+ *
+ * Internal — not exported from api.ts.
+ */
+export function selectOnPointerDown(e) {
+    const el = e.currentTarget;
+    if (document.activeElement !== el) {
+        e.preventDefault();
+        el.focus();
+        el.select();
+    }
+}
+export function selectOnFocusEvent(e) {
+    e.currentTarget.select();
+}

package/dist/sh3core-shard/Sh3Home.svelte

@@ -18,6 +18,7 @@
   import { makeSelectionApi } from '../actions/selection.svelte';
   import { getAppearance } from '../app-appearance';
   import iconsUrl from '../assets/icons.svg';
+  import { manifest } from '../shell-shard/manifest';
 
   const homeSelection = makeSelectionApi('__sh3core__');
 
@@ -93,7 +94,7 @@
             type="button"
             class="sh3-home-card"
             class:sh3-home-card--tinted={appearance?.color}
-            style:--card-color={appearance?.color ?? 'transparent'}
+            style:--card-color={appearance?.color ?? manifest.color ?? 'transparent'}
             data-sh3-scope="element:app"
             onclick={() => launchApp(manifest.id)}
             oncontextmenu={(e) => openAppContextMenu(e, manifest.id)}

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** Auto-generated from package.json — do not edit manually. */
-export declare const VERSION = "0.22.2";
+export declare const VERSION = "0.22.5";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** Auto-generated from package.json — do not edit manually. */
-export const VERSION = '0.22.2';
+export const VERSION = '0.22.5';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh3-core",
-  "version": "0.22.2",
+  "version": "0.22.5",
   "type": "module",
   "files": [
     "dist"