@lostgradient/cinder 0.4.1 → 0.5.0

package/src/components/hero-section/hero-section.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category domain
+   * @status stable
+   * @purpose Landing-page hero scaffold with eyebrow, heading, supporting copy, CTA row, and optional media panel.
+   * @tag marketing
+   * @tag hero
+   * @tag layout
+   * @useWhen Building the first section of a marketing page where a primary message and call-to-action must stand out.
+   * @useWhen Pairing conversion copy with a visual demo, screenshot, or illustration in a split layout.
+   * @avoidWhen Presenting only a compact call-to-action strip between content sections. | cta-section
+   * @avoidWhen Listing repeatable product benefits or cards — use a dedicated features grid instead. | feature-section
+   * @related cta-section, feature-section, section-heading, container, button
+   */
+  export type {
+    HeroSectionAlign,
+    HeroSectionMediaPosition,
+    HeroSectionProps,
+  } from './hero-section.types.ts';
+</script>
+
+<script lang="ts">
+  import Container from '../container/container.svelte';
+  import { classNames } from '../../utilities/class-names.ts';
+
+  import type { HeroSectionProps } from './hero-section.types.ts';
+
+  let {
+    as = 'section',
+    eyebrow,
+    title,
+    description,
+    align = 'start',
+    mediaPosition = 'end',
+    maxWidth = 'wide',
+    actions,
+    media,
+    class: className,
+    children,
+    ...rest
+  }: HeroSectionProps = $props();
+</script>
+
+<svelte:element
+  this={as}
+  class={classNames('cinder-hero-section', className)}
+  data-cinder-align={align}
+  data-cinder-media-position={mediaPosition}
+  data-cinder-has-media={media ? '' : undefined}
+  {...rest}
+>
+  <Container {maxWidth}>
+    <div class="cinder-hero-section__inner">
+      <div class="cinder-hero-section__content">
+        {#if eyebrow}
+          <p class="cinder-hero-section__eyebrow">{eyebrow}</p>
+        {/if}
+        <h2 class="cinder-hero-section__title">{title}</h2>
+        {#if description}
+          <p class="cinder-hero-section__description">{description}</p>
+        {/if}
+        {#if actions}
+          <div class="cinder-hero-section__actions">
+            {@render actions()}
+          </div>
+        {/if}
+        {#if children}
+          <div class="cinder-hero-section__extra">
+            {@render children()}
+          </div>
+        {/if}
+      </div>
+      {#if media}
+        <div class="cinder-hero-section__media">
+          {@render media()}
+        </div>
+      {/if}
+    </div>
+  </Container>
+</svelte:element>

package/src/components/hero-section/hero-section.types.ts

@@ -0,0 +1,51 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ContainerMaxWidth } from '../container/container.types.ts';
+
+export type HeroSectionAlign = 'start' | 'center';
+export type HeroSectionMediaPosition = 'start' | 'end';
+
+/** Props for the HeroSection component. */
+export type HeroSectionProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Small uppercase intro label rendered above the title. */
+  eyebrow?: string;
+  /** Main marketing headline. */
+  title: string;
+  /** Supporting copy shown below the title. */
+  description?: string;
+  /** Text alignment for heading and body copy. @default "start" */
+  align?: HeroSectionAlign;
+  /** Position of the optional media panel on wide layouts. @default "end" */
+  mediaPosition?: HeroSectionMediaPosition;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Optional CTA row, usually one or two Button components. */
+  actions?: Snippet;
+  /** Optional visual/media block (image, demo, illustration). */
+  media?: Snippet;
+  /** Optional extra content rendered below description/actions. */
+  children?: Snippet;
+  /** Custom class merged with `.cinder-hero-section`. */
+  class?: string;
+};
+
+export interface HeroSectionSchemaProps {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Small uppercase intro label rendered above the title. */
+  eyebrow?: string;
+  /** Main marketing headline. */
+  title: string;
+  /** Supporting copy shown below the title. */
+  description?: string;
+  /** Text alignment for heading and body copy. @default "start" */
+  align?: HeroSectionAlign;
+  /** Position of the optional media panel on wide layouts. @default "end" */
+  mediaPosition?: HeroSectionMediaPosition;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-hero-section`. */
+  class?: string;
+}

package/src/components/hero-section/index.ts

@@ -0,0 +1,10 @@
+import './hero-section.css';
+import HeroSection from './hero-section.svelte';
+
+export default HeroSection;
+export type {
+  HeroSectionAlign,
+  HeroSectionMediaPosition,
+  HeroSectionProps,
+} from './hero-section.types.ts';
+export { HeroSection };

package/src/components/inline-loading/index.ts

@@ -0,0 +1,6 @@
+import './inline-loading.css';
+import InlineLoading from './inline-loading.svelte';
+
+export default InlineLoading;
+export type { InlineLoadingProps, InlineLoadingStatus } from './inline-loading.types.ts';
+export { InlineLoading };

package/src/components/inline-loading/inline-loading.css

@@ -0,0 +1,50 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@import '../spinner/spinner.css';
+
+@layer cinder.components {
+  .cinder-inline-loading {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+    min-block-size: 1em;
+    color: var(--cinder-text-muted);
+    vertical-align: middle;
+  }
+
+  .cinder-inline-loading[data-cinder-status='inactive'] {
+    display: none;
+  }
+
+  .cinder-inline-loading[data-cinder-status='active'] {
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-inline-loading[data-cinder-status='finished'] {
+    color: var(--cinder-success);
+  }
+
+  .cinder-inline-loading[data-cinder-status='error'] {
+    color: var(--cinder-danger);
+  }
+
+  .cinder-inline-loading__indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+    flex-shrink: 0;
+  }
+
+  .cinder-inline-loading__indicator .cinder-spinner {
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+    border-width: 1.5px;
+  }
+
+  .cinder-inline-loading__label {
+    font-size: var(--cinder-text-sm);
+    line-height: 1.25;
+    color: inherit;
+  }
+}

package/src/components/inline-loading/inline-loading.examples.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "inline-loading",
+  "import": "@lostgradient/cinder/inline-loading",
+  "examples": [
+    {
+      "id": "lifecycle",
+      "title": "Inline loading lifecycle",
+      "description": "Inline async action states: active, finished, and error.",
+      "code": "<script lang=\"ts\">\n  import { onDestroy } from 'svelte';\n  import { Button, InlineLoading } from '@lostgradient/cinder';\n\n  let status = $state<'inactive' | 'active' | 'finished' | 'error'>('inactive');\n  let message = $state('Saved');\n  let pendingTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  function cancelPending(): void {\n    if (pendingTimeout !== null) {\n      clearTimeout(pendingTimeout);\n      pendingTimeout = null;\n    }\n  }\n\n  onDestroy(cancelPending);\n\n  function startSuccess(): void {\n    cancelPending();\n    status = 'active';\n    message = 'Saving changes';\n    pendingTimeout = setTimeout(() => {\n      status = 'finished';\n      message = 'Saved';\n      pendingTimeout = null;\n    }, 900);\n  }\n\n  function startError(): void {\n    cancelPending();\n    status = 'active';\n    message = 'Saving changes';\n    pendingTimeout = setTimeout(() => {\n      status = 'error';\n      message = 'Save failed';\n      pendingTimeout = null;\n    }, 900);\n  }\n</script>\n\n<div class=\"example-preview-column\" style=\"align-items: flex-start; gap: 0.75rem;\">\n  <div class=\"example-preview-row\" style=\"align-items: center; gap: 0.75rem;\">\n    <Button type=\"button\" onclick={startSuccess}>Save (success)</Button>\n    <Button type=\"button\" variant=\"secondary\" onclick={startError}>Save (error)</Button>\n    <InlineLoading bind:status description={message} />\n  </div>\n</div>\n"
+    }
+  ]
+}

package/src/components/inline-loading/inline-loading.svelte

@@ -0,0 +1,139 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category feedback
+   * @status alpha
+   * @purpose Inline async-action status indicator that transitions from loading to success or error with accessible announcements.
+   * @tag async
+   * @tag feedback
+   * @tag loading
+   * @tag status
+   * @useWhen Showing a compact Submit -> loading -> success/error lifecycle beside a button or form row.
+   * @useWhen Communicating short-lived async state transitions without reserving large layout space.
+   * @avoidWhen Showing indeterminate work without success/error transitions — use spinner.
+   * @avoidWhen Reporting static non-loading status in dense lists — use status-dot.
+   * @related spinner, status-dot
+   */
+  export type { InlineLoadingProps, InlineLoadingStatus } from './inline-loading.types.ts';
+</script>
+
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import Check from 'lucide-svelte/icons/check';
+  import X from 'lucide-svelte/icons/x';
+  import { classNames } from '../../utilities/class-names.ts';
+  import Spinner from '../spinner/spinner.svelte';
+  import VisuallyHiddenLiveRegion from '../_visually-hidden-live-region.svelte';
+  import type { InlineLoadingProps, InlineLoadingStatus } from './inline-loading.types.ts';
+
+  const fallbackStatusLabel: Record<Exclude<InlineLoadingStatus, 'inactive'>, string> = {
+    active: 'Loading',
+    finished: 'Success',
+    error: 'Error',
+  };
+
+  let {
+    // $bindable so the component can write `status = 'inactive'` when the
+    // successDelay timer fires. Without this, if the parent re-assigns
+    // `status = 'finished'` while it is already 'finished' (after the
+    // visual auto-reset), Svelte does not re-run the effect because the
+    // value did not change, so the success indicator stays hidden.
+    status = $bindable<InlineLoadingStatus>('inactive'),
+    description,
+    iconDescription,
+    successDelay = 1500,
+    class: className,
+    ...rest
+  }: InlineLoadingProps = $props();
+
+  let visualStatus = $state<InlineLoadingStatus>(status);
+  let successTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const normalizedDescription = $derived(description?.trim() ? description.trim() : undefined);
+  const normalizedIconDescription = $derived(
+    iconDescription?.trim() ? iconDescription.trim() : undefined,
+  );
+  const fallbackText = $derived(
+    visualStatus === 'inactive' ? '' : fallbackStatusLabel[visualStatus],
+  );
+  const visibleDescription = $derived(
+    visualStatus === 'inactive' ? '' : (normalizedDescription ?? fallbackText),
+  );
+  const spokenDescription = $derived(
+    visualStatus === 'inactive'
+      ? ''
+      : (normalizedDescription ?? normalizedIconDescription ?? fallbackText),
+  );
+  const announcementMessage = $derived(
+    visualStatus === 'inactive'
+      ? ''
+      : spokenDescription === fallbackText
+        ? spokenDescription
+        : `${fallbackText}. ${spokenDescription}`,
+  );
+
+  function clearSuccessTimer(): void {
+    if (successTimer !== null) {
+      clearTimeout(successTimer);
+      successTimer = null;
+    }
+  }
+
+  $effect(() => {
+    return () => {
+      clearSuccessTimer();
+    };
+  });
+
+  $effect(() => {
+    clearSuccessTimer();
+
+    if (status !== 'finished') {
+      visualStatus = status;
+      return;
+    }
+
+    // Read successDelay without registering it as a reactive dependency so that
+    // a prop change to successDelay while status is still "finished" (e.g. after
+    // the auto-reset timer already fired) does not re-show the success indicator.
+    const delay = untrack(() => successDelay);
+
+    if (!Number.isFinite(delay) || delay <= 0) {
+      visualStatus = 'inactive';
+      status = 'inactive';
+      return;
+    }
+
+    visualStatus = 'finished';
+    successTimer = setTimeout(() => {
+      visualStatus = 'inactive';
+      // Reset the bindable prop so a subsequent `status = 'finished'` from the
+      // parent is a real value change ('inactive' -> 'finished'), allowing the
+      // effect to re-run and show the success indicator again.
+      status = 'inactive';
+      successTimer = null;
+    }, delay);
+  });
+</script>
+
+<span
+  {...rest}
+  class={classNames('cinder-inline-loading', className)}
+  data-cinder-status={visualStatus}
+  aria-hidden={visualStatus === 'inactive' ? 'true' : undefined}
+>
+  {#if visualStatus !== 'inactive'}
+    <span class="cinder-inline-loading__indicator" aria-hidden="true">
+      {#if visualStatus === 'active'}
+        <Spinner size="sm" label={spokenDescription} />
+      {:else if visualStatus === 'finished'}
+        <Check size={14} strokeWidth={2.25} />
+      {:else}
+        <X size={14} strokeWidth={2.25} />
+      {/if}
+    </span>
+    <span class="cinder-inline-loading__label">{visibleDescription}</span>
+  {/if}
+</span>
+
+<VisuallyHiddenLiveRegion message={announcementMessage} />

package/src/components/inline-loading/inline-loading.types.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export type InlineLoadingStatus = 'inactive' | 'active' | 'finished' | 'error';
+
+export type InlineLoadingProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
+  /**
+   * Lifecycle state for the inline async action indicator. Bindable: the
+   * component resets this to `"inactive"` after the `successDelay` timer fires
+   * so a subsequent `status = "finished"` from the parent is always a real
+   * value transition that re-shows the success indicator.
+   * @default "inactive"
+   */
+  status?: InlineLoadingStatus;
+  /** Visible status label rendered next to the indicator. */
+  description?: string;
+  /** Accessible status wording used by announcements when no visible description is provided. */
+  iconDescription?: string;
+  /** Delay in milliseconds before auto-resetting `finished` back to `inactive`. @default 1500 */
+  successDelay?: number;
+  /** Extra classes appended to the root element. */
+  class?: string;
+};
+
+export interface InlineLoadingSchemaProps {
+  /**
+   * Lifecycle state for the inline async action indicator. Bindable: the
+   * component resets this to `"inactive"` after the `successDelay` timer fires
+   * so a subsequent `status = "finished"` from the parent is always a real
+   * value transition that re-shows the success indicator.
+   * @default "inactive"
+   */
+  status?: InlineLoadingStatus;
+  /** Visible status label rendered next to the indicator. */
+  description?: string;
+  /** Accessible status wording used by announcements when no visible description is provided. */
+  iconDescription?: string;
+  /** Delay in milliseconds before auto-resetting `finished` back to `inactive`. @default 1500 */
+  successDelay?: number;
+  /** Extra classes appended to the root element. */
+  class?: string;
+}

package/src/components/input/input.examples.json

@@ -9,6 +9,12 @@
       "description": "Text input with label and bound value.",
       "code": "<script lang=\"ts\">\n  import { Input } from '@lostgradient/cinder/input';\n\n  let name = $state('');\n</script>\n\n<Input id=\"field\" bind:value={name} label=\"Full name\" placeholder=\"Jane Smith\" />\n{#if name}\n  <p style=\"margin-top: 0.5rem; color: var(--cinder-text-muted);\">Hello, {name}!</p>\n{/if}\n"
     },
+    {
+      "id": "compact-hidden-label",
+      "title": "Compact field with hidden label",
+      "description": "Keep the accessible name from label while visually hiding it for compact auth/token layouts.",
+      "code": "<script lang=\"ts\">\n  import { Input } from '@lostgradient/cinder/input';\n\n  let token = $state('');\n</script>\n\n<Input\n  id=\"demo-token\"\n  bind:value={token}\n  label=\"Demo token\"\n  hideLabel\n  autocomplete=\"off\"\n  placeholder=\"Enter demo token\"\n/>\n"
+    },
     {
       "id": "sign-in",
       "title": "Sign-in composition",

package/src/components/input/input.svelte

@@ -29,6 +29,7 @@
     value = $bindable(''),
     onValueChange,
     label,
+    hideLabel = false,
     description,
     error,
     disabled,
@@ -155,7 +156,11 @@
 
 <div class="cinder-input-field">
   {#if label}
-    <label for={id} class="cinder-input-field__label" data-disabled={resolvedDisabled || undefined}>
+    <label
+      for={id}
+      class={classNames('cinder-input-field__label', hideLabel && 'cinder-sr-only')}
+      data-disabled={resolvedDisabled || undefined}
+    >
       {label}
       {#if resolvedRequired}
         <span class="cinder-_required-marker" aria-hidden="true">*</span>

package/src/components/input/input.types.ts

@@ -46,6 +46,8 @@ export type InputProps = HTMLInputAttributes &
     onValueChange?: (next: string) => string | void;
     /** Visible label text rendered above the input and linked via `for`/`id`. */
     label?: string;
+    /** Visually hide the rendered `label` while keeping it programmatically associated. */
+    hideLabel?: boolean;
     /** Helper text rendered below the input and associated via `aria-describedby`. */
     description?: string;
     /** Error message rendered below the input; also sets `aria-invalid` on the input. */

package/src/components/json-schema-editor/json-schema-validator.ts

@@ -265,23 +265,20 @@ function findJsonIncompatibility(value: unknown, path: string, seen: Set<unknown
     return null;
   }
 
-  if (isObject(value)) {
-    const proto = Object.getPrototypeOf(value);
-    if (proto !== null && proto !== Object.prototype) {
-      const constructorName: string =
-        typeof proto.constructor?.name === 'string' ? proto.constructor.name : 'unknown';
-      return `non-plain object (${constructorName}) at ${path || 'root'}`;
-    }
-    for (const key of Object.keys(value)) {
-      const child = value[key];
-      const error = findJsonIncompatibility(child, `${path}.${key}`, seen);
-      if (error) return error;
-    }
-    seen.delete(value);
-    return null;
-  }
+  if (!isObject(value)) return null;
 
-  return `unsupported value at ${path || 'root'}`;
+  const proto = Object.getPrototypeOf(value);
+  if (proto !== null && proto !== Object.prototype) {
+    const constructorName: string =
+      typeof proto.constructor?.name === 'string' ? proto.constructor.name : 'unknown';
+    return `non-plain object (${constructorName}) at ${path || 'root'}`;
+  }
+  for (const [key, child] of Object.entries(value)) {
+    const error = findJsonIncompatibility(child, `${path}.${key}`, seen);
+    if (error) return error;
+  }
+  seen.delete(value);
+  return null;
 }
 
 const PRETTY_INDENT = 2;

package/src/components/logo-cloud/index.ts

@@ -0,0 +1,6 @@
+import './logo-cloud.css';
+import LogoCloud from './logo-cloud.svelte';
+
+export default LogoCloud;
+export type { LogoCloudItem, LogoCloudProps } from './logo-cloud.types.ts';
+export { LogoCloud };

package/src/components/logo-cloud/logo-cloud.css

@@ -0,0 +1,104 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-logo-cloud {
+    container-type: inline-size;
+    padding-block: var(--cinder-space-8);
+  }
+
+  .cinder-logo-cloud__inner {
+    display: grid;
+    gap: var(--cinder-space-5);
+  }
+
+  .cinder-logo-cloud__header {
+    display: grid;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-logo-cloud__title,
+  .cinder-logo-cloud__description {
+    margin: 0;
+  }
+
+  .cinder-logo-cloud__description {
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-logo-cloud__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: var(--cinder-space-5);
+    align-items: center;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .cinder-logo-cloud[data-cinder-columns='3'] .cinder-logo-cloud__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .cinder-logo-cloud[data-cinder-columns='4'] .cinder-logo-cloud__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .cinder-logo-cloud[data-cinder-columns='5'] .cinder-logo-cloud__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .cinder-logo-cloud[data-cinder-columns='6'] .cinder-logo-cloud__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .cinder-logo-cloud__item {
+    display: flex;
+    justify-content: center;
+  }
+
+  .cinder-logo-cloud__link {
+    display: inline-flex;
+  }
+
+  .cinder-logo-cloud__image {
+    max-inline-size: 100%;
+    max-block-size: 2.25rem;
+    object-fit: contain;
+  }
+
+  .cinder-logo-cloud[data-cinder-grayscale] .cinder-logo-cloud__image {
+    filter: grayscale(1);
+    opacity: 0.75;
+    transition:
+      filter var(--cinder-duration-fast) var(--cinder-ease-standard),
+      opacity var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  .cinder-logo-cloud[data-cinder-grayscale]
+    .cinder-logo-cloud__item:hover
+    .cinder-logo-cloud__image {
+    filter: grayscale(0);
+    opacity: 1;
+  }
+
+  @container (min-width: 48rem) {
+    .cinder-logo-cloud[data-cinder-columns='3'] .cinder-logo-cloud__list {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cinder-logo-cloud[data-cinder-columns='4'] .cinder-logo-cloud__list,
+    .cinder-logo-cloud[data-cinder-columns='5'] .cinder-logo-cloud__list,
+    .cinder-logo-cloud[data-cinder-columns='6'] .cinder-logo-cloud__list {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @container (min-width: 64rem) {
+    .cinder-logo-cloud[data-cinder-columns='5'] .cinder-logo-cloud__list {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cinder-logo-cloud[data-cinder-columns='6'] .cinder-logo-cloud__list {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+}

package/src/components/logo-cloud/logo-cloud.examples.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "logo-cloud",
+  "import": "@lostgradient/cinder/logo-cloud",
+  "examples": [
+    {
+      "id": "basic",
+      "title": "LogoCloud",
+      "description": "LogoCloud rendering a trusted-by strip with linked and unlinked logos.",
+      "code": "<script lang=\"ts\">\n  import { LogoCloud } from '@lostgradient/cinder/logo-cloud';\n\n  const logos = [\n    { name: 'Acme', src: 'https://placehold.co/180x64?text=Acme', href: '#' },\n    { name: 'Orbit', src: 'https://placehold.co/180x64?text=Orbit', href: '#' },\n    { name: 'Northline', src: 'https://placehold.co/180x64?text=Northline' },\n    { name: 'Wave', src: 'https://placehold.co/180x64?text=Wave', href: '#' },\n    { name: 'Summit', src: 'https://placehold.co/180x64?text=Summit' },\n  ];\n</script>\n\n<LogoCloud title=\"Trusted by modern product teams\" {logos} columns={5} />\n"
+    }
+  ]
+}