@huaweidevtools/aishell-dsh-brand 0.0.1-beta.2 → 0.0.1-beta.4

package/lib/types/client/suggestion-icons.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Inline SVG artwork for the suggestion cards.
+ *
+ * Inline rather than an icon dependency: the strip draws four shapes, and a
+ * dependency would add a package, a version to track, and a bundle face to
+ * keep in step with the host.
+ *
+ * Every path is drawn on a 24×24 viewBox with `currentColor`, so a card
+ * decides the colour by setting `color` and nothing here hard-codes a theme
+ * value.
+ *
+ * ## Shape rules, learned by getting them wrong
+ *
+ * The first draft drew "deploy" as a box with an arrow leaving it — which
+ * reads as SHARE or export, the one meaning this card must not carry. A
+ * glyph in a row of four is read at a glance and out of context, so each one
+ * has to be recognisable on its own:
+ *
+ *   - nothing may resemble the share glyph (box + outward arrow) or the
+ *     external-link glyph (box + arrow through a corner);
+ *   - every shape is closed and filled-ish in silhouette, because outlines
+ *     at 20px in a row of four blur into each other;
+ *   - no glyph carries more than three strokes, so they stay distinguishable
+ *     at the size they are actually drawn.
+ *
+ * These rules are not machine-checked: rendering the glyphs needs
+ * `react-dom/server`, which this repo does not depend on, and vitest here
+ * collects only `.spec.ts` (not `.tsx`). The browser harness in
+ * `scripts/render-check/` is what actually puts them on screen.
+ *
+ * @module @huaweidevtools/aishell-dsh-brand/client/suggestion-icons
+ */
+import type { ReactNode } from 'react';
+import type { SuggestionIcon } from './suggestions.ts';
+/** Props shared by every glyph. */
+interface IconProps {
+    /** Rendered size in px; the cards use 20. */
+    readonly size?: number;
+}
+/** Resolve one icon key to its glyph. */
+export declare function SuggestionIconArt({ icon, size, }: IconProps & {
+    readonly icon: SuggestionIcon;
+}): ReactNode;
+export {};
+//# sourceMappingURL=suggestion-icons.d.ts.map

package/lib/types/client/suggestions.d.ts

@@ -0,0 +1,118 @@
+/**
+ * The New-Session example cards, and the shapes they need.
+ *
+ * One array drives the whole strip: add or reorder a card by editing
+ * `SUGGESTIONS` and adding its three keys to `locales.ts`, and nothing else.
+ * The row renders whatever it is given — three or fewer display side by side
+ * with no arrows, more than three become a carousel.
+ *
+ * ## This file holds no copy
+ *
+ * Every string a person reads — the card title, its one-line gloss, and the
+ * prompt a click inserts — lives in `locales.ts`, addressed by the keys here.
+ * A card whose text were inlined would be readable in exactly one language,
+ * and the prompt it inserted would start a conversation in that language no
+ * matter what the reader's locale was.
+ *
+ * The three keys per card are separate rather than one blob because the
+ * surfaces differ: the card shows `title` and `gloss` (both clamped — one
+ * line and two lines — so a long string ellipsizes instead of breaking the
+ * row), while `prompt` goes to the composer and is never displayed on the
+ * card. A prompt that only restates its title makes the click pointless;
+ * written as a pair, the prompt carries the context and the expected output
+ * that make the first message worth sending without editing.
+ *
+ * ## Sizing, when editing copy
+ *
+ * Three cards share one row, which at the default column leaves roughly 150px
+ * per title — about seven CJK glyphs, or noticeably more Latin ones. Measured
+ * against the shipped set: every title fits at 560px and above, and all four
+ * clip below ~460px. Keep them within a couple of characters of each other —
+ * the longest one is otherwise the only card that ever shows an ellipsis,
+ * which reads as a bug rather than as a long name.
+ *
+ * @module @huaweidevtools/aishell-dsh-brand/client/suggestions
+ */
+import type { AishellBrandLocaleKey } from './locales.ts';
+/** One example card: what it looks like, and what a click inserts. */
+export interface Suggestion {
+    /**
+     * Stable identity for React keys and for the carousel's position maths.
+     * Not shown to anyone — it names the dictionary key prefix, so renaming it
+     * means renaming three keys in `locales.ts`.
+     */
+    readonly id: string;
+    /** Icon key resolved by {@link SuggestionIconArt}. */
+    readonly icon: SuggestionIcon;
+    /** The tile colour, measured to work in both themes. See {@link SuggestionHue}. */
+    readonly hue: SuggestionHue;
+    /** Dictionary key for the card's one-line title. */
+    readonly titleKey: AishellBrandLocaleKey;
+    /** Dictionary key for the line under the title. */
+    readonly glossKey: AishellBrandLocaleKey;
+    /** Dictionary key for the text inserted into the composer. */
+    readonly promptKey: AishellBrandLocaleKey;
+}
+/** The icon set this strip can draw. Keys are local to this plugin. */
+export type SuggestionIcon = 'cloud' | 'deploy' | 'architecture' | 'cost';
+/**
+ * The tile colour for one card, as the shell's own token names.
+ *
+ * ## Why each card carries its own hue
+ *
+ * The first version drew every icon in one accent, on the reasoning that four
+ * hues beside the brand mark would read as noise. That was a guess, and the
+ * shell contradicts it: `FileTypeIcon` gives every item in a row its own hue
+ * (`code` blue, `excel` green, `folder` amber, `image` violet), which is the
+ * same situation — a row of small glyphs read at a glance — and it chooses
+ * per-item colour. Colour is what makes such a row scannable rather than a
+ * wall of identical tiles.
+ *
+ * ## These are STATIC tokens, not the semantic ones
+ *
+ * `--dsw-alias-state-success-primary` and friends mean "the operation
+ * succeeded" / "this needs attention". A card about cost is not a warning, so
+ * borrowing the warning colour would be a lie the palette tells. The `static`
+ * family is the one intended for decorative identity, which is exactly what a
+ * card's hue is — and `FileTypeIcon` reaches for the same family.
+ *
+ * ## The values were chosen by measurement, in both themes
+ *
+ * Violet is the exception: the design platform ships NO violet token, so
+ * `FileTypeIcon` defines one locally (`rgb(139, 118, 246)`) for its own
+ * artwork. The same value is reused here rather than inventing a second one,
+ * and it is the only literal colour in this plugin.
+ *
+ * The four were picked to clear three bars at once, in both themes:
+ *
+ *   - glyph on its tile >= 4.5 — measured 5.42 at worst (violet);
+ *   - tile against the card >= 1.6 — measured 2.05 at worst;
+ *   - worst pairwise colour distance >= 30 (CIE76 dE) — measured 38.7.
+ *
+ * The last bar is the one that matters for "four colours, not one blur": an
+ * obvious-looking pick like blue + violet measures only 17.5 apart, which is
+ * why this is measured rather than eyeballed.
+ */
+export interface SuggestionHue {
+    /**
+     * The tile fill. A SOLID hue, with the glyph in `--dsw-alias-label-primary-
+     * foreground` on top.
+     *
+     * A tint of the hue was the first attempt and it measured badly: a glyph
+     * drawn in a hue on top of a tint of that same hue has almost nothing to
+     * separate them, so the contrast was 1.8–2.8 — and RAISING the tint made it
+     * worse, since more of the hue behind the glyph means less difference from
+     * it. A solid tile puts the glyph on full-strength colour instead, which
+     * measured 5.4–9.9 for the same hues.
+     */
+    readonly tile: string;
+}
+/**
+ * The cards, in display order.
+ *
+ * Order matters only for the ring's starting window: the strip opens on the
+ * first {@link VISIBLE} cards, so the first entries are the ones a person
+ * sees without pressing an arrow.
+ */
+export declare const SUGGESTIONS: readonly Suggestion[];
+//# sourceMappingURL=suggestions.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@huaweidevtools/aishell-dsh-brand",
   "description": "AI Shell brand reskin for DSH web — replaces sidebar and hero brand marks with AI Shell SVG",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1-beta.4",
   "publishConfig": {
     "access": "public"
   },
@@ -30,7 +30,8 @@
       "inject": [
         "@deepseek-ai/dsh-client-ui-renderer",
         "@deepseek-ai/dsh-client-ui-sidebar",
-        "@deepseek-ai/dsh-client-ui-conversation"
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-locale"
       ],
       "platform": "web"
     },
@@ -44,12 +45,15 @@
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "^4.0.4",
-    "@deepseek-ai/dsh-client-ui-conversation": ">=0.2.0-0 <0.3.0-0",
-    "@deepseek-ai/dsh-client-ui-renderer": ">=0.2.0-0 <0.3.0-0",
-    "@deepseek-ai/dsh-client-ui-sidebar": ">=0.2.0-0 <0.3.0-0",
-    "@deepseek-ai/dsh-client-ui-slots": ">=0.2.0-0 <0.3.0-0",
+    "@deepseek-ai/dsh-client-locale": "0.2.0-rc.1 || 0.2.1-rc.1 || 0.2.1-rc.2 || 0.2.1",
+    "@deepseek-ai/dsh-client-ui-conversation": "0.2.0-rc.1 || 0.2.1-rc.1 || 0.2.1-rc.2 || 0.2.1",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.2.0-rc.1 || 0.2.1-rc.1 || 0.2.1-rc.2 || 0.2.1",
+    "@deepseek-ai/dsh-client-ui-sidebar": "0.2.0-rc.1 || 0.2.1-rc.1 || 0.2.1-rc.2 || 0.2.1",
+    "@deepseek-ai/dsh-client-ui-slots": "0.2.0-rc.1 || 0.2.1-rc.1 || 0.2.1-rc.2 || 0.2.1",
     "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.1",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tsdown": "^0.10.0",
     "typescript": "^5.7.0"
   },