@walkeros/explorer 4.8.0-next-1791441510508 → 4.8.0

package/dist/design/components/index.d.cts

@@ -63,8 +63,9 @@ interface EventLegendProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function EventLegend({ parts, className, ...rest }: EventLegendProps): react_jsx_runtime.JSX.Element;
 
+type IconName = 'check' | 'copy' | 'lock' | 'reload' | 'bookmark' | 'warning';
 interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'name'> {
-    name: 'check' | 'copy';
+    name: IconName;
     size?: number;
 }
 /** The design system's line glyphs, drawn in currentColor; a check is always primary. */
@@ -132,6 +133,15 @@ interface InstallCommandProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
  */
 declare function InstallCommand({ command, className, 'aria-describedby': describedBy, ...rest }: InstallCommandProps): react_jsx_runtime.JSX.Element;
 
+interface PhotoPlaceholderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The word in the middle. */
+    label?: string;
+    /** `theme` follows dark and light; `viz` is the demos' look, dark in both. */
+    tone?: 'theme' | 'viz';
+}
+/** A striped stand-in for a photo, sized by the caller. */
+declare function PhotoPlaceholder({ label, tone, className, ...rest }: PhotoPlaceholderProps): react_jsx_runtime.JSX.Element;
+
 interface CheckListProps extends HTMLAttributes<HTMLUListElement> {
     items: ReactNode[];
     /** `inline` wraps in a row (16px checks); `stack` is a column (14px checks). */
@@ -215,12 +225,53 @@ interface HighlightCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
     label: string;
     title: ReactNode;
     children: ReactNode;
-    cta: CallToAction;
+    /** A secondary button below the text; omit for a card without one. */
+    cta?: CallToAction;
     linkComponent?: LinkComponent;
 }
-/** A large card with a corner glow and a secondary CTA: a direction to explore. */
+/** A large card with a corner glow and an optional secondary CTA: a direction to explore. */
 declare function HighlightCard({ label, title, children, cta, linkComponent, className, ...rest }: HighlightCardProps): react_jsx_runtime.JSX.Element;
 
+interface BrowserBookmark {
+    label: string;
+    url: string;
+}
+interface BrowserFrameProps extends HTMLAttributes<HTMLDivElement> {
+    /** Shown read-only in the address field. */
+    url: string;
+    /** A row of links under the address bar; the one whose `url` equals `url` is current. */
+    bookmarks?: ReadonlyArray<BrowserBookmark>;
+    /** Called with a bookmark's url on its click; without it the bookmarks are disabled. */
+    onNavigate?: (url: string) => void;
+    /** Adds a reload button. */
+    onReload?: () => void;
+    /** The caller's controls at the end of the address bar, after reload; a link or button there looks like reload. */
+    actions?: ReactNode;
+    /** The page: fills the viewport. An `iframe` takes its full size, borderless. */
+    children: ReactNode;
+}
+/**
+ * A browser window around a page, on the site theme. The caller sizes it: give
+ * the root a height (and a width where it does not fill its parent) through
+ * `className` or `style`; the viewport takes what the bars leave.
+ */
+declare function BrowserFrame({ url, bookmarks, onNavigate, onReload, actions, children, className, ...rest }: BrowserFrameProps): react_jsx_runtime.JSX.Element;
+
+interface QuickstartStep {
+    title: string;
+    text: string;
+}
+interface QuickstartStepsProps extends HTMLAttributes<HTMLDivElement> {
+    steps: ReadonlyArray<QuickstartStep>;
+    /** After the steps, aligned to their start: the link to the full guide. */
+    children?: ReactNode;
+}
+/**
+ * Numbered steps in a row joined by hand-drawn arrows, a column on narrow
+ * screens; the children follow below.
+ */
+declare function QuickstartSteps({ steps, children, className, ...rest }: QuickstartStepsProps): react_jsx_runtime.JSX.Element;
+
 interface SectionProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;
     /** `alt` grounds the band in bg-2. */
@@ -253,9 +304,14 @@ interface ClusterProps extends HTMLAttributes<HTMLDivElement> {
     /** `actions` 12px apart; `links` 8px rows and 24px columns. */
     gap?: 'actions' | 'links';
     align?: 'start' | 'center';
+    /**
+     * Set apart from the content above by an extra heading gap, for a call to
+     * action below a section's content.
+     */
+    separated?: boolean;
 }
 /** A wrapping row of buttons or links. */
-declare function Cluster({ children, gap, align, className, ...rest }: ClusterProps): react_jsx_runtime.JSX.Element;
+declare function Cluster({ children, gap, align, separated, className, ...rest }: ClusterProps): react_jsx_runtime.JSX.Element;
 
 interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     eyebrow: ReactNode;
@@ -318,8 +374,9 @@ interface ArticleTeaserTrackingProps extends HTMLAttributes<HTMLDivElement> {
  * Tagging demo: one ArticleTeaser tagged once, walked through atom, molecule,
  * organisms and pages, showing how every instance inherits entity, action,
  * properties, context and globals. Autoplays while the code is in view; shows
- * the finished walk-through with reduced motion.
+ * the finished walk-through with reduced motion. A clicked step plays from its
+ * start and stays there.
  */
 declare function ArticleTeaserTracking({ autoplay, speed, initialStep, ...rest }: ArticleTeaserTrackingProps): react_jsx_runtime.JSX.Element;
 
-export { ArticleTeaserTracking, type ArticleTeaserTrackingProps, Button, type ButtonProps, type CallToAction, Card, CardGrid, type CardGridProps, type CardProps, CaseCard, type CaseCardProps, type CaseStat, CheckList, type CheckListProps, Cluster, type ClusterProps, type DataAttributes, DestinationMappingViz, type DestinationMappingVizProps, EventLegend, type EventLegendProps, Eyebrow, type EyebrowProps, FaqItem, type FaqItemProps, FeatureItem, type FeatureItemProps, Hero, type HeroProps, HeroTaggingViz, type HeroTaggingVizProps, HighlightCard, type HighlightCardProps, Icon, type IconProps, InlineCode, type InlineCodeProps, InstallCommand, type InstallCommandProps, type LinkComponent, PlanCard, type PlanCardProps, ProblemCard, type ProblemCardProps, Section, SectionHeading, type SectionHeadingProps, type SectionProps, Split, type SplitProps, Stat, type StatProps, Text, TextLink, type TextLinkProps, type TextProps };
+export { ArticleTeaserTracking, type ArticleTeaserTrackingProps, type BrowserBookmark, BrowserFrame, type BrowserFrameProps, Button, type ButtonProps, type CallToAction, Card, CardGrid, type CardGridProps, type CardProps, CaseCard, type CaseCardProps, type CaseStat, CheckList, type CheckListProps, Cluster, type ClusterProps, type DataAttributes, DestinationMappingViz, type DestinationMappingVizProps, EventLegend, type EventLegendProps, Eyebrow, type EyebrowProps, FaqItem, type FaqItemProps, FeatureItem, type FeatureItemProps, Hero, type HeroProps, HeroTaggingViz, type HeroTaggingVizProps, HighlightCard, type HighlightCardProps, Icon, type IconProps, InlineCode, type InlineCodeProps, InstallCommand, type InstallCommandProps, type LinkComponent, PhotoPlaceholder, type PhotoPlaceholderProps, PlanCard, type PlanCardProps, ProblemCard, type ProblemCardProps, type QuickstartStep, QuickstartSteps, type QuickstartStepsProps, Section, SectionHeading, type SectionHeadingProps, type SectionProps, Split, type SplitProps, Stat, type StatProps, Text, TextLink, type TextLinkProps, type TextProps };

package/dist/design/components/index.d.ts

@@ -63,8 +63,9 @@ interface EventLegendProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function EventLegend({ parts, className, ...rest }: EventLegendProps): react_jsx_runtime.JSX.Element;
 
+type IconName = 'check' | 'copy' | 'lock' | 'reload' | 'bookmark' | 'warning';
 interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'name'> {
-    name: 'check' | 'copy';
+    name: IconName;
     size?: number;
 }
 /** The design system's line glyphs, drawn in currentColor; a check is always primary. */
@@ -132,6 +133,15 @@ interface InstallCommandProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
  */
 declare function InstallCommand({ command, className, 'aria-describedby': describedBy, ...rest }: InstallCommandProps): react_jsx_runtime.JSX.Element;
 
+interface PhotoPlaceholderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The word in the middle. */
+    label?: string;
+    /** `theme` follows dark and light; `viz` is the demos' look, dark in both. */
+    tone?: 'theme' | 'viz';
+}
+/** A striped stand-in for a photo, sized by the caller. */
+declare function PhotoPlaceholder({ label, tone, className, ...rest }: PhotoPlaceholderProps): react_jsx_runtime.JSX.Element;
+
 interface CheckListProps extends HTMLAttributes<HTMLUListElement> {
     items: ReactNode[];
     /** `inline` wraps in a row (16px checks); `stack` is a column (14px checks). */
@@ -215,12 +225,53 @@ interface HighlightCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
     label: string;
     title: ReactNode;
     children: ReactNode;
-    cta: CallToAction;
+    /** A secondary button below the text; omit for a card without one. */
+    cta?: CallToAction;
     linkComponent?: LinkComponent;
 }
-/** A large card with a corner glow and a secondary CTA: a direction to explore. */
+/** A large card with a corner glow and an optional secondary CTA: a direction to explore. */
 declare function HighlightCard({ label, title, children, cta, linkComponent, className, ...rest }: HighlightCardProps): react_jsx_runtime.JSX.Element;
 
+interface BrowserBookmark {
+    label: string;
+    url: string;
+}
+interface BrowserFrameProps extends HTMLAttributes<HTMLDivElement> {
+    /** Shown read-only in the address field. */
+    url: string;
+    /** A row of links under the address bar; the one whose `url` equals `url` is current. */
+    bookmarks?: ReadonlyArray<BrowserBookmark>;
+    /** Called with a bookmark's url on its click; without it the bookmarks are disabled. */
+    onNavigate?: (url: string) => void;
+    /** Adds a reload button. */
+    onReload?: () => void;
+    /** The caller's controls at the end of the address bar, after reload; a link or button there looks like reload. */
+    actions?: ReactNode;
+    /** The page: fills the viewport. An `iframe` takes its full size, borderless. */
+    children: ReactNode;
+}
+/**
+ * A browser window around a page, on the site theme. The caller sizes it: give
+ * the root a height (and a width where it does not fill its parent) through
+ * `className` or `style`; the viewport takes what the bars leave.
+ */
+declare function BrowserFrame({ url, bookmarks, onNavigate, onReload, actions, children, className, ...rest }: BrowserFrameProps): react_jsx_runtime.JSX.Element;
+
+interface QuickstartStep {
+    title: string;
+    text: string;
+}
+interface QuickstartStepsProps extends HTMLAttributes<HTMLDivElement> {
+    steps: ReadonlyArray<QuickstartStep>;
+    /** After the steps, aligned to their start: the link to the full guide. */
+    children?: ReactNode;
+}
+/**
+ * Numbered steps in a row joined by hand-drawn arrows, a column on narrow
+ * screens; the children follow below.
+ */
+declare function QuickstartSteps({ steps, children, className, ...rest }: QuickstartStepsProps): react_jsx_runtime.JSX.Element;
+
 interface SectionProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;
     /** `alt` grounds the band in bg-2. */
@@ -253,9 +304,14 @@ interface ClusterProps extends HTMLAttributes<HTMLDivElement> {
     /** `actions` 12px apart; `links` 8px rows and 24px columns. */
     gap?: 'actions' | 'links';
     align?: 'start' | 'center';
+    /**
+     * Set apart from the content above by an extra heading gap, for a call to
+     * action below a section's content.
+     */
+    separated?: boolean;
 }
 /** A wrapping row of buttons or links. */
-declare function Cluster({ children, gap, align, className, ...rest }: ClusterProps): react_jsx_runtime.JSX.Element;
+declare function Cluster({ children, gap, align, separated, className, ...rest }: ClusterProps): react_jsx_runtime.JSX.Element;
 
 interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     eyebrow: ReactNode;
@@ -318,8 +374,9 @@ interface ArticleTeaserTrackingProps extends HTMLAttributes<HTMLDivElement> {
  * Tagging demo: one ArticleTeaser tagged once, walked through atom, molecule,
  * organisms and pages, showing how every instance inherits entity, action,
  * properties, context and globals. Autoplays while the code is in view; shows
- * the finished walk-through with reduced motion.
+ * the finished walk-through with reduced motion. A clicked step plays from its
+ * start and stays there.
  */
 declare function ArticleTeaserTracking({ autoplay, speed, initialStep, ...rest }: ArticleTeaserTrackingProps): react_jsx_runtime.JSX.Element;
 
-export { ArticleTeaserTracking, type ArticleTeaserTrackingProps, Button, type ButtonProps, type CallToAction, Card, CardGrid, type CardGridProps, type CardProps, CaseCard, type CaseCardProps, type CaseStat, CheckList, type CheckListProps, Cluster, type ClusterProps, type DataAttributes, DestinationMappingViz, type DestinationMappingVizProps, EventLegend, type EventLegendProps, Eyebrow, type EyebrowProps, FaqItem, type FaqItemProps, FeatureItem, type FeatureItemProps, Hero, type HeroProps, HeroTaggingViz, type HeroTaggingVizProps, HighlightCard, type HighlightCardProps, Icon, type IconProps, InlineCode, type InlineCodeProps, InstallCommand, type InstallCommandProps, type LinkComponent, PlanCard, type PlanCardProps, ProblemCard, type ProblemCardProps, Section, SectionHeading, type SectionHeadingProps, type SectionProps, Split, type SplitProps, Stat, type StatProps, Text, TextLink, type TextLinkProps, type TextProps };
+export { ArticleTeaserTracking, type ArticleTeaserTrackingProps, type BrowserBookmark, BrowserFrame, type BrowserFrameProps, Button, type ButtonProps, type CallToAction, Card, CardGrid, type CardGridProps, type CardProps, CaseCard, type CaseCardProps, type CaseStat, CheckList, type CheckListProps, Cluster, type ClusterProps, type DataAttributes, DestinationMappingViz, type DestinationMappingVizProps, EventLegend, type EventLegendProps, Eyebrow, type EyebrowProps, FaqItem, type FaqItemProps, FeatureItem, type FeatureItemProps, Hero, type HeroProps, HeroTaggingViz, type HeroTaggingVizProps, HighlightCard, type HighlightCardProps, Icon, type IconProps, InlineCode, type InlineCodeProps, InstallCommand, type InstallCommandProps, type LinkComponent, PhotoPlaceholder, type PhotoPlaceholderProps, PlanCard, type PlanCardProps, ProblemCard, type ProblemCardProps, type QuickstartStep, QuickstartSteps, type QuickstartStepsProps, Section, SectionHeading, type SectionHeadingProps, type SectionProps, Split, type SplitProps, Stat, type StatProps, Text, TextLink, type TextLinkProps, type TextProps };