@gryt/ui 0.24.0 → 0.25.0

package/dist/components/OwlDesigner/owlDesigner.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Choosing what your owl looks like, instead of only what your name hashes to.
+ *
+ * Everybody already has an owl — `@gryt/owl` draws one from the nickname, and
+ * that is what a member list shows for anyone who has not uploaded a picture.
+ * This lets somebody take that owl and choose its colours, its expression and
+ * what it is wearing.
+ *
+ * Three columns: the slots on a rail, every option for the chosen slot as a
+ * grid of owls, and the owl itself pinned on the right where it does not scroll
+ * away. That last part is the whole reason for this shape — comparing two hats
+ * should be looking rather than remembering.
+ *
+ * Options are drawn, never named. The expression slot holds fourteen things and
+ * `eyes-eyelashes-surprised` in a dropdown tells nobody anything.
+ */
+export declare function AvatarChoiceDialog({ open, nickname, onOpenChange, onUpload, onDesign, }: {
+    open: boolean;
+    nickname: string;
+    onOpenChange: (open: boolean) => void;
+    onUpload: () => void;
+    onDesign: () => void;
+}): import("react").JSX.Element;
+/**
+ * The designer itself, with no dialog around it.
+ *
+ * Split out so it can sit in a page as well as in a modal. The client opens it
+ * from settings and wants the dialog; gryt.chat puts it straight on the front
+ * page, where a modal would mean asking somebody to open a window to look at a
+ * toy. `OwlDesignerDialog` below is now a thin wrapper around this.
+ *
+ * `onCancel` is optional. Inline there is nothing to cancel back to, so the
+ * button is simply absent rather than present and inert.
+ */
+export declare function OwlDesigner({ nickname, saving, onSave, onCancel, active, followSeed, }: {
+    nickname: string;
+    saving: boolean;
+    onSave: (png: Blob, worn: string) => void;
+    onCancel?: () => void;
+    /** Reset when this goes true. The dialog uses it for "was just opened". */
+    active?: boolean;
+    /**
+     * Open on the owl the nickname already draws, and keep following it while
+     * the nickname changes, until somebody changes something here.
+     *
+     * gryt.chat sets this. The client does not: there you open the designer to
+     * design, and your last look is the right place to start.
+     */
+    followSeed?: boolean;
+}): import("react").JSX.Element;
+/**
+ * The designer in a modal, which is how the client opens it from settings.
+ *
+ * Kept as a wrapper rather than as the only shape, because gryt.chat renders
+ * `OwlDesigner` straight into the page. The title is here rather than inside
+ * the designer: a dialog needs an accessible name, a section on a page already
+ * has a heading above it.
+ */
+export declare function OwlDesignerDialog({ open, nickname, saving, onOpenChange, onSave, }: {
+    open: boolean;
+    nickname: string;
+    saving: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSave: (png: Blob, worn: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=owlDesigner.d.ts.map

package/dist/components/OwlDesigner/owlDesigner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"owlDesigner.d.ts","sourceRoot":"","sources":["../../../src/components/OwlDesigner/owlDesigner.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AA6WH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,+BAiEA;AAID;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,MAAM,EACN,QAAQ,EACR,MAAa,EACb,UAAkB,GACnB,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,+BA2YA;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,MAAM,GACP,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,+BAkBA"}

package/dist/components/OwlDesigner/owlExport.d.ts

@@ -0,0 +1,31 @@
+import { WornLook } from '@gryt/owl';
+/** The size a raster export is written at. See the note above. */
+export declare const EXPORT_SIZE = 1024;
+export interface ExportFormat {
+    id: "svg" | "png" | "webp" | "jpeg";
+    label: string;
+    /** What it is good for, in the few words a menu row has. */
+    hint: string;
+    extension: string;
+    mime: string;
+}
+export declare const EXPORT_FORMATS: readonly ExportFormat[];
+/**
+ * The owl as a blob in one of the formats above.
+ *
+ * The rasters go through an `<img>` and a canvas so the browser draws the same
+ * SVG it would have drawn on screen, rather than this reimplementing the
+ * geometry and getting a slightly different owl.
+ */
+export declare function renderOwl(seed: string, look: WornLook, format: ExportFormat, size?: number): Promise<Blob>;
+/** `sivert-owl.png`, and nothing a filesystem will refuse. */
+export declare function exportFilename(nickname: string, format: ExportFormat): string;
+/**
+ * Hand the blob to the browser as a download.
+ *
+ * The object URL is revoked on a timer rather than immediately. Revoking in the
+ * same tick can beat the download starting, and the failure is a save that
+ * silently does nothing.
+ */
+export declare function saveBlob(blob: Blob, filename: string): void;
+//# sourceMappingURL=owlExport.d.ts.map

package/dist/components/OwlDesigner/owlExport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"owlExport.d.ts","sourceRoot":"","sources":["../../../src/components/OwlDesigner/owlExport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAkC,KAAK,QAAQ,EAAgB,MAAM,WAAW,CAAC;AAExF,kEAAkE;AAClE,eAAO,MAAM,WAAW,OAAO,CAAC;AAEhC,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,cAAc,EAAE,SAAS,YAAY,EAKjD,CAAC;AAEF;;;;;;GAMG;AACH,wBAAsB,SAAS,CAC7B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,YAAY,EACpB,IAAI,SAAc,GACjB,OAAO,CAAC,IAAI,CAAC,CAwCf;AAED,8DAA8D;AAC9D,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAG,MAAM,CAQ7E;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAS3D"}

package/dist/components/OwlDesigner/owlSeen.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Which cosmetics somebody has already had a look at.
+ *
+ * Cosmetics get added and nothing says so, so the editor puts a dot on the ones
+ * that are new — on the drawing itself, and on its slot in the rail so you know
+ * which category to open.
+ *
+ * The whole feature turns on one decision, and it is the first-run case rather
+ * than anything about drawing dots.
+ *
+ * A fresh install has no record. Treating "not in the record" as "new" would
+ * light up all thirty-seven on the first open, which is worse than no badge at
+ * all: a badge on everything is a badge on nothing, and it trains somebody to
+ * ignore the dot before they have ever seen it mean something. So the first
+ * read writes the whole registry into the record and reports nothing as new.
+ *
+ * The badge therefore means exactly one thing — added since you last looked —
+ * which is the only thing it is any use for.
+ *
+ * localStorage, beside the wardrobe. It is a list of names; losing it costs a
+ * dot rather than an avatar, and IndexedDB would be a lot of machinery for
+ * something with that consequence.
+ */
+/**
+ * The cosmetics that have appeared since this person last opened the editor.
+ *
+ * `all` is every accessory name the running build knows. Pass the registry —
+ * this deliberately does not import it, so the caller decides what "everything"
+ * means and this stays a store rather than a second source of truth.
+ *
+ * Empty on a first run, by design. See the note at the top.
+ */
+export declare function readNewCosmetics(all: readonly string[]): Set<string>;
+/**
+ * Record that somebody has tried one on, and return what is still new.
+ *
+ * Tried on, not hovered or scrolled past. Wearing a thing is the moment you
+ * have actually seen it, and it is also the moment the dot has done its job.
+ */
+export declare function markCosmeticSeen(name: string, all: readonly string[]): Set<string>;
+/**
+ * Record every one of them, for "I have looked, stop telling me".
+ *
+ * Returns an empty set so a caller can use it as the new state directly.
+ */
+export declare function markAllCosmeticsSeen(all: readonly string[]): Set<string>;
+//# sourceMappingURL=owlSeen.d.ts.map

package/dist/components/OwlDesigner/owlSeen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"owlSeen.d.ts","sourceRoot":"","sources":["../../../src/components/OwlDesigner/owlSeen.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAyBH;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAUpE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAQlF;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAGxE"}

package/dist/components/OwlDesigner/owlWardrobe.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Every look somebody has worn, kept so going back to one is a click.
+ *
+ * A look is a sixteen-character string from `@gryt/owl`, which is what makes a
+ * wardrobe cheap enough to be worth having: a wardrobe of pictures would be an
+ * upload and a stored file per entry, and nobody would keep more than a couple.
+ * A wardrobe of strings is a list in settings.
+ *
+ * Newest first, deduplicated, and capped — see LIMIT for why there is one.
+ */
+export interface WardrobeEntry {
+    /** The encoded look. */
+    worn: string;
+    /** When it was last used, so the newest reads as "what I have on". */
+    at: number;
+}
+export declare function readWardrobe(): WardrobeEntry[];
+/**
+ * Records a look as worn, and returns the wardrobe as it now stands.
+ *
+ * Wearing something again moves it to the front rather than adding a second
+ * copy, so the list stays a set of looks rather than a history of clicks.
+ */
+export declare function rememberLook(worn: string): WardrobeEntry[];
+export declare function forgetLook(worn: string): WardrobeEntry[];
+//# sourceMappingURL=owlWardrobe.d.ts.map

package/dist/components/OwlDesigner/owlWardrobe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"owlWardrobe.d.ts","sourceRoot":"","sources":["../../../src/components/OwlDesigner/owlWardrobe.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAWH,MAAM,WAAW,aAAa;IAC5B,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,wBAAgB,YAAY,IAAI,aAAa,EAAE,CAiB9C;AAUD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,EAAE,CAK1D;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,EAAE,CAIxD"}