@vectoriox/iox-ui 5.83.0 → 5.84.0

package/src/generation-core/stock-photos.ts

@@ -231,6 +231,40 @@ export type StockPlacement<T extends StockTarget = StockTarget> = T & { photo: S
 export interface StockPlanOptions {
     /** The business type's imagery line (harness-core `BusinessType.imagery`) — its words count for every slot. */
     imagery?: string;
+    /**
+     * M7 (premium sites PS4): the SITE the photos are chosen for (its organization). Among the photos that answer a slot
+     * nearly as well as the best (`STOCK_SEED_MARGIN`), the seed decides — so two sites of the same kind of business stop
+     * opening on the same hero, and the same site always gets the same photos. No seed: the library's order decides.
+     */
+    seed?: string;
+    /** M7: library keys other sites of this studio already show — chosen only when no photo they do not show fits. */
+    avoid?: ReadonlyArray<string>;
+}
+
+/** How far below the best score a photo may be and still be the seed's choice (one word of the plan's, about). */
+export const STOCK_SEED_MARGIN = 2;
+
+/** A stable 32-bit hash (FNV-1a) — the seed's order of the library, the same in every runtime. */
+function seededRank(seed: string, key: string): number {
+    let hash = 0x811c9dc5;
+    for (const ch of `${seed}:${key}`) {
+        hash ^= ch.codePointAt(0)!;
+        hash = Math.imul(hash, 0x01000193) >>> 0;
+    }
+    return hash;
+}
+
+/** The best of `pool` for `slot`: the highest score (ties: the library's order), or — with a seed — the seed's pick among
+ *  those within `STOCK_SEED_MARGIN` of it. */
+function bestFor(pool: ReadonlyArray<StockPhoto>, slot: StockNeed, imagery: ReadonlyArray<string>, seed: string | undefined): StockPhoto | undefined {
+    const scored = pool.map(photo => ({ photo, score: scoreStockPhoto(photo, slot, imagery) }));
+    const top = scored.reduce((m, s) => Math.max(m, s.score), -Infinity);
+    if (!seed) return scored.find(s => s.score === top)?.photo;
+    const near = scored.filter(s => s.score >= top - STOCK_SEED_MARGIN);
+    return near.reduce<{ photo: StockPhoto; rank: number } | undefined>((best, s) => {
+        const rank = seededRank(seed, s.photo.key);
+        return !best || rank < best.rank ? { photo: s.photo, rank } : best;
+    }, undefined)?.photo;
 }
 
 const intentRank = (intent: string) => STOCK_INTENT_ORDER.indexOf(intent as StockIntent);
@@ -239,15 +273,17 @@ const intentRank = (intent: string) => STOCK_INTENT_ORDER.indexOf(intent as Stoc
  * Which photo goes where (I2.1). Slots choose in intent order (the hero first, list items last; page order within),
  * each taking the best-scoring photo that FITS its shape (`stockFits`) and is not already on its page (or among its
  * type's samples) — a photo no slot has taken yet always before one another page shows. Ties go to the library's
- * order. A slot nothing fits keeps its empty box (a sample its abstract picture). None at all when the type says no
- * stock, and never a photo the review rejected or flagged. Returned in the slots' order.
+ * order — or, with a `seed` (M7), the site's own pick among those nearly as good, and another site's photos (`avoid`) only
+ * when nothing fresh fits. A slot nothing fits keeps its empty box (a sample its abstract picture). None at all when the
+ * type says no stock, and never a photo the review rejected or flagged. Returned in the slots' order.
  */
 export function planStockPhotos<T extends StockTarget>(slots: ReadonlyArray<T>, photos: ReadonlyArray<StockPhoto>, stockAllowed: boolean, opts: StockPlanOptions = {}): Array<StockPlacement<T>> {
     if (!stockAllowed) return [];
     const usable = photos.filter(stockPhotoUsable);
     const imagery = stockWords(opts.imagery);
     const order = slots.map((slot, i) => ({ slot, i })).sort((a, b) => intentRank(a.slot.intent) - intentRank(b.slot.intent) || a.i - b.i);
-    const used = new Set<string>();
+    // Another site's photos count as already shown: a fresh one that fits always comes first.
+    const used = new Set<string>(opts.avoid ?? []);
     const shownIn = new Map<string, Set<string>>();
     const placed = new Map<number, StockPlacement<T>>();
     for (const { slot, i } of order) {
@@ -255,13 +291,7 @@ export function planStockPhotos<T extends StockTarget>(slots: ReadonlyArray<T>,
         const here = shownIn.get(group) ?? new Set<string>();
         const candidates = usable.filter(p => !here.has(p.key) && stockFits(p, slot));
         const fresh = candidates.filter(p => !used.has(p.key));
-        const pool = fresh.length ? fresh : candidates;
-        let best: StockPhoto | undefined;
-        let bestScore = -Infinity;
-        for (const photo of pool) {
-            const score = scoreStockPhoto(photo, slot, imagery);
-            if (score > bestScore) { best = photo; bestScore = score; }
-        }
+        const best = bestFor(fresh.length ? fresh : candidates, slot, imagery, opts.seed);
         if (!best) continue;
         used.add(best.key);
         here.add(best.key);

package/src/generation-core/validate-site-plan.ts

@@ -10,6 +10,7 @@ import { ContentFieldControl, FIELD_TYPE_OF_CONTROL,
     FACT_KEYS, GlobalSlot, PAGE_ARCHETYPES, SITE_NEED_IDS, PlanDataSourceMode, PlanDataSourceType, RelativeOp, REQUIRED_CONTENT_ROLES, SitePlan, SitePlanSourceKind,
     SITE_LOCALES, SITE_PLAN_VERSION,
 } from './site-plan.model';
+import { artDirectionIssues } from './art-direction';
 import { patternListGap } from './recipe-fields';
 import { SPEC_SITE_PLAN_SHAPE } from './site-spec.generated';
 import {
@@ -76,6 +77,8 @@ export enum SitePlanIssueCode {
     /** SC6b: the owner's film — pictures that cannot play, too few to play smoothly, or a film's pattern on a plan with
      *  no film (or twice). Set by the build, never by a model. */
     Film = 'film',
+    /** M7: the art direction is not a picture world with its five parts. Set by the generation, never by a model. */
+    ArtDirection = 'art-direction',
 }
 
 export type SitePlanIssue = PathIssue<SitePlanIssueCode>;
@@ -115,6 +118,7 @@ const CMS_SOURCE_KEYS = shapeKeys(SHAPE['cmsDataSource']);
 const RELATIVE_SOURCE_KEYS = shapeKeys(SHAPE['relativeDataSource']);
 const PAGE_KEYS = shapeKeys(SHAPE['page']);
 const FILM_KEYS = shapeKeys(SHAPE['film']);
+const ART_DIRECTION_KEYS = shapeKeys(SHAPE['artDirection']);
 const SECTION_KEYS = shapeKeys(SHAPE['section']);
 const GLOBAL_POSITION: Readonly<Record<`${GlobalSlot}`, `${PatternGlobalPosition}`>> = {
     [GlobalSlot.Header]: PatternGlobalPosition.Before,
@@ -508,6 +512,15 @@ function validateFilm(c: Collector, film: unknown, pages: unknown[]): void {
     });
 }
 
+/** M7: what every picture made for the site shares — a known world and its five parts (`artDirectionIssues`). */
+function validateArtDirection(c: Collector, direction: unknown): void {
+    if (direction === undefined) return;
+    if (isObject(direction)) c.keys(direction, ART_DIRECTION_KEYS, 'artDirection');
+    for (const issue of artDirectionIssues(direction)) {
+        c.add(issue.path ? SitePlanIssueCode.ArtDirection : SitePlanIssueCode.Shape, issue.path ? `artDirection.${issue.path}` : 'artDirection', issue.message);
+    }
+}
+
 function validatePageSeo(c: Collector, seo: unknown, path: string): void {
     if (seo === undefined) return;
     if (!isObject(seo)) return c.add(SitePlanIssueCode.Shape, path, 'must be an object');
@@ -556,6 +569,7 @@ export function validateSitePlan(plan: unknown): SitePlanValidation {
     validateGlobals(c, plan['globals']);
     validateScenes(c, c.array(plan, 'pages', ''), typeof design['animate'] === 'string' ? design['animate'] : null);
     validateFilm(c, plan['film'], c.array(plan, 'pages', ''));
+    validateArtDirection(c, plan['artDirection']);
     return { valid: c.issues.length === 0, issues: c.issues };
 }
 

package/src/harness-core/business-types.ts

@@ -1,5 +1,5 @@
 import type { DensityId, DesignMotion, MoodId, MotionId, TintId } from '@vectoriox/iox-ui/design-core';
-import type { FactKey } from '@vectoriox/iox-ui/generation-core';
+import type { FactKey, PictureWorld } from '@vectoriox/iox-ui/generation-core';
 
 import {
     SPEC_BUSINESS_TYPES, SPEC_HARNESS_SOURCE, SPEC_NEEDS, SPEC_STRUCTURES, SPEC_USER_AVOIDS,
@@ -115,6 +115,8 @@ export interface BusinessType {
      *  so a type capped below it never gets one. Binds generated output only — the owner may choose any level. */
     readonly ceiling: DesignMotion['animate'];
     readonly imagery: string;
+    /** M7: the picture world a site's made pictures start in (generation-core `artDirectionFor`; contract site.pictureWorlds). */
+    readonly world: `${PictureWorld}`;
     readonly pages: ReadonlyArray<string>;
     /** The needs its page set implies, in page order (derived from `pages` at contract build). */
     readonly needs: ReadonlyArray<NeedId>;

package/src/harness-core/generation-view.ts

@@ -1,6 +1,6 @@
 import type { DesignChoices } from '@vectoriox/iox-ui/design-core';
 import type { FrameSequence } from '@vectoriox/iox-ui/media-core';
-import type { AiGenerationStage, AiStep, PlanChange, PlanEdit, SitePlan } from '@vectoriox/iox-ui/generation-core';
+import type { AiGenerationStage, AiRefusalCode, AiStep, PictureRefusal, PlanChange, PlanEdit, SitePlan } from '@vectoriox/iox-ui/generation-core';
 
 import type { StyleRead } from './rank';
 import type { SiteAnalysis } from './site-analysis';
@@ -73,6 +73,44 @@ export interface PlanRevisionView {
     changed?: PlanChange[];
 }
 
+/** Why no picture can be made for this site right now (the Plan step says it instead of offering the switch). */
+export enum PicturesUnavailable {
+    /** No slot is left after the owner's photos and the refusals. */
+    Nothing = 'nothing',
+    /** The key in use has no model that makes pictures (a Claude key does not). */
+    NoModel = 'no-model',
+}
+
+/**
+ * M7: the pictures a generation may have MADE, as the Plan step shows them before the owner says yes, and while they are
+ * made. `estimate` is the cost shown — every picture and its review plus the second tries (generation-core
+ * `estimatePictures`) — and the most the run may spend on them.
+ */
+export interface GenerationPicturesView {
+    /** Pictures that would be made (after the owner's photos and the refusals). */
+    count: number;
+    /** The owner's photos that go first. */
+    own: number;
+    /** Slots no picture is made for, by why. */
+    refused: Partial<Record<`${PictureRefusal}`, number>>;
+    /** Credits — the cost shown and the run's ceiling. */
+    estimate: number;
+    /** One picture with its review, in credits. */
+    each: number;
+    rerolls: number;
+    /** The model that makes them, or null. */
+    model: string | null;
+    /** Why none can be made now — instead of the switch. A refusal code when credits or the plan say no. */
+    unavailable?: `${PicturesUnavailable}` | `${AiRefusalCode}`;
+    /** The owner said yes (Build with pictures): the run's progress. */
+    wanted?: boolean;
+    made?: number;
+    /** Slots whose review said no to every try — stock or the empty box stands in. */
+    failed?: number;
+    /** Credits the pictures have cost so far (the ledger). */
+    spent?: number;
+}
+
 export interface AiGenerationView {
     _id: string;
     organization: string;
@@ -101,6 +139,17 @@ export interface AiGenerationView {
     /** Derived from the ledger — the running credit total. */
     spent: number;
     error?: { code: string; detail: string; providerMessage?: string; issues?: Array<{ code: string; path: string }> };
+    /** M7: the pictures that may be made (on the Plan step) or are being made. Absent: no plan yet. */
+    pictures?: GenerationPicturesView;
+}
+
+/** `POST …/ai/generations/:id/build` (and `/auto`). */
+export interface GenerationBuildRequest {
+    replaceGlobals?: boolean;
+    /** SC6b: the owner's film as pictures. */
+    film?: FrameSequence;
+    /** M7: make pictures for the site first (the cost shown on the Plan step). */
+    pictures?: boolean;
 }
 
 /** `POST …/ai/generations`. */

package/src/harness-core/harness-spec.generated.ts

@@ -207,6 +207,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "cinematic"
     },
     "ceiling": "expressive",
+    "world": "documentary",
     "imagery": "Your own photos only, large and uncropped; never stock.",
     "pages": [
       "home",
@@ -312,6 +313,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "cinematic"
     },
     "ceiling": "expressive",
+    "world": "architectural",
     "imagery": "Wide, bright room shots; details of materials.",
     "pages": [
       "home",
@@ -422,6 +424,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "expressive",
+    "world": "architectural",
     "imagery": "Large project photos and drawings.",
     "pages": [
       "home",
@@ -531,6 +534,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "slide"
     },
     "ceiling": "expressive",
+    "world": "hard-light",
     "imagery": "Case-study images of your own work.",
     "pages": [
       "home",
@@ -630,6 +634,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "expressive",
+    "world": "drawing",
     "imagery": "Your pieces, photographed flat and true to colour.",
     "pages": [
       "home",
@@ -735,6 +740,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "slide"
     },
     "ceiling": "expressive",
+    "world": "macro",
     "imagery": "Your pieces and hands at work; natural light.",
     "pages": [
       "home",
@@ -833,6 +839,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "cinematic"
     },
     "ceiling": "expressive",
+    "world": "macro",
     "imagery": "Close-ups on a plain ground.",
     "pages": [
       "home",
@@ -935,6 +942,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "slide"
     },
     "ceiling": "expressive",
+    "world": "low-key",
     "imagery": "Healed work, clean photos.",
     "pages": [
       "home",
@@ -1031,6 +1039,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "standard",
+    "world": "high-key",
     "imagery": "Rooms, textures, hands; no faces needed.",
     "pages": [
       "home",
@@ -1150,6 +1159,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "lively",
+    "world": "high-key",
     "imagery": "Your own before-and-after photos.",
     "pages": [
       "home",
@@ -1252,6 +1262,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "lively",
+    "world": "high-key",
     "imagery": "The room, real classes, daylight.",
     "pages": [
       "home",
@@ -1362,6 +1373,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "slide"
     },
     "ceiling": "lively",
+    "world": "hard-light",
     "imagery": "Real people training; movement.",
     "pages": [
       "home",
@@ -1464,6 +1476,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "none"
     },
     "ceiling": "subtle",
+    "world": "documentary",
     "imagery": "A calm room, daylight; your portrait.",
     "pages": [
       "home",
@@ -1574,6 +1587,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "subtle",
+    "world": "high-key",
     "imagery": "Your team and rooms; no stock doctors.",
     "pages": [
       "home",
@@ -1679,6 +1693,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "subtle",
+    "world": "high-key",
     "imagery": "Your clinic and team.",
     "pages": [
       "home",
@@ -1785,6 +1800,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "standard",
+    "world": "documentary",
     "imagery": "Real animals you treat (with permission).",
     "pages": [
       "home",
@@ -1883,6 +1899,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "expressive",
+    "world": "low-key",
     "imagery": "Your own food and room photos.",
     "pages": [
       "home",
@@ -1992,6 +2009,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "slide"
     },
     "ceiling": "lively",
+    "world": "documentary",
     "imagery": "Your bakes and drinks, close up.",
     "pages": [
       "home",
@@ -2095,6 +2113,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "cinematic"
     },
     "ceiling": "expressive",
+    "world": "nocturne",
     "imagery": "The cellar, the bar, the bottle.",
     "pages": [
       "home",
@@ -2198,6 +2217,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "slide"
     },
     "ceiling": "expressive",
+    "world": "high-key",
     "imagery": "Product photos on plain grounds; real people wearing them.",
     "pages": [
       "home",
@@ -2293,6 +2313,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "lively",
+    "world": "macro",
     "imagery": "Your own arrangements in daylight.",
     "pages": [
       "home",
@@ -2389,6 +2410,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "expressive",
+    "world": "documentary",
     "imagery": "Pieces in real rooms and on plain grounds.",
     "pages": [
       "home",
@@ -2486,6 +2508,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "standard",
+    "world": "architectural",
     "imagery": "Your portrait; diagrams over stock.",
     "pages": [
       "home",
@@ -2587,6 +2610,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "standard",
+    "world": "documentary",
     "imagery": "Your portrait, working with people.",
     "pages": [
       "home",
@@ -2683,6 +2707,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "none"
     },
     "ceiling": "subtle",
+    "world": "architectural",
     "imagery": "Your team; your office.",
     "pages": [
       "home",
@@ -2793,6 +2818,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "slide"
     },
     "ceiling": "lively",
+    "world": "architectural",
     "imagery": "Your own property photos; never stock.",
     "pages": [
       "home",
@@ -2898,6 +2924,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "fade"
     },
     "ceiling": "standard",
+    "world": "documentary",
     "imagery": "Real people you help (with permission).",
     "pages": [
       "home",
@@ -2991,6 +3018,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "cinematic"
     },
     "ceiling": "expressive",
+    "world": "nocturne",
     "imagery": "Real events at your venue.",
     "pages": [
       "home",
@@ -3093,6 +3121,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "cinematic"
     },
     "ceiling": "expressive",
+    "world": "documentary",
     "imagery": "Rooms, views, breakfast; your own photos.",
     "pages": [
       "home",
@@ -3201,6 +3230,7 @@ export const SPEC_BUSINESS_TYPES = [
       "between": "slide"
     },
     "ceiling": "lively",
+    "world": "documentary",
     "imagery": "Real classes (with permission).",
     "pages": [
       "home",

package/styles/iox-forms.css

@@ -112,12 +112,15 @@
 
 /* ── Date (premium N8): the field is a BUTTON saying the date in words; the browser's date box is never shown (it
    cannot take the look — its icon was black on a dark flavor — and on an iPhone it is an empty box until tapped). ── */
+/* As wide as a text box beside it (the browser's own ~20 characters), wider for longer words — never the whole row
+   while its neighbours are not; an author's part width still wins (the node's rule out-specifies this one). */
 .iox-field__control--date {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
-    inline-size: 100%;
+    min-inline-size: 15em;
+    max-inline-size: 100%;
     text-align: start;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
@@ -237,6 +240,10 @@ dialog.iox-cal::backdrop { background: transparent; }
     @starting-style { dialog.iox-cal[open] { opacity: 0; transform: none; } }
     dialog.iox-cal[data-iox-closing] { opacity: 0; transition-duration: 120ms; }
 }
+/* Opened from the KEYBOARD (Enter / Space on the date button): it simply appears, and Esc or Enter on a day closes it
+   at once — keyboard-initiated actions never animate (Emil 2). The pointer gets the motion above. */
+dialog.iox-cal[data-iox-instant],
+dialog.iox-cal[data-iox-instant]::backdrop { transition: none !important; }
 
 /* The submit button follows its FORM's state (vectoriox/iox-ui#42, premium N2). Its three labels (forms-core
    submitButtonLabelsHtml / IoxSubmitButtonComponent) share one grid cell, so the button keeps the longest one's width
@@ -266,6 +273,8 @@ dialog.iox-cal::backdrop { background: transparent; }
     transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), filter 160ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
 }
 .iox-submit[aria-busy="true"] { cursor: progress; }
+/* Sent is final: the button stays as the confirmation, and no longer says it can be pressed. */
+.iox-form[data-iox-state="success"] .iox-submit { cursor: default; }
 /* Sent draws its check ONCE (the rare-tier beat — Emil 135/136: stroke-dashoffset over 400ms on the check-draw
    curve), a beat after the label arrives. Leaving Sent resets it at once, so the next success draws it again. */
 .iox-submit__check { flex: none; }