@24vlh/vds 0.1.9 → 0.2.0

package/dist/components/command.css

@@ -8,6 +8,8 @@
  *      metadata, icons, disabled/active/selected states
  *    - Provide empty states and footer guidance for fuzzy-search systems
  *    - Support compact density mode and optional leading/trailing icons
+ *    - Extend command landing pages: actions, queues, glances, nudges,
+ *      progress lanes, and activity snapshots
  *    - Maintain predictable accessibility: focus-visible, aria-selected,
  *      aria-disabled, and reduced motion
  *
@@ -49,6 +51,28 @@
     --command-label-muted: var(--color-text-muted);
     --command-scrollbar-thumb: var(--color-border-subtle);
     --command-scrollbar-track: transparent;
+
+    --command-page-bg: var(--color-bg);
+    --command-page-gap: var(--space-6);
+    --command-page-padding: var(--space-6);
+    --command-page-max-width: var(--content-width-xl);
+    --command-surface-bg: var(--color-surface);
+    --command-surface-border: var(--color-border-subtle);
+    --command-surface-radius: var(--radius-lg);
+    --command-surface-shadow: var(--shadow-sm);
+    --command-surface-pad: var(--space-4);
+    --command-surface-gap: var(--space-3);
+    --command-surface-title: var(--color-text);
+    --command-surface-muted: var(--color-text-muted);
+    --command-rail-width: var(--border-width-strong);
+    --command-accent: var(--color-accent);
+    --command-accent-soft: var(--color-accent-soft);
+    --command-accent-text: var(--color-on-accent);
+    --command-pill-bg: var(--color-surface-subtle);
+    --command-pill-border: var(--color-border-subtle);
+    --command-pill-text: var(--color-text-muted);
+    --command-progress-track: var(--color-muted-bg);
+    --command-progress-fill: var(--color-accent);
 }
 
 .command {
@@ -508,14 +532,834 @@
 }
 
 /* ---------------------------------------------------------
-   8. REDUCED MOTION SAFETY (optional extra)
+   8. COMMAND PAGE FOUNDATION (Landing / Hub)
+--------------------------------------------------------- */
+
+.command-page {
+    display: flex;
+    flex-direction: column;
+    gap: var(--command-page-gap);
+    max-width: var(--command-page-max-width);
+    margin: 0 auto;
+    color: var(--command-surface-title);
+}
+
+.command-page--dense {
+    --command-page-gap: var(--space-4);
+}
+
+.command-page__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.command-page__kicker {
+    font-size: var(--text-xs);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--command-surface-muted);
+}
+
+.command-page__title {
+    font-size: var(--text-2xl);
+    font-weight: 600;
+    font-weight: var(--font-weight-semibold, 600);
+}
+
+.command-page__subtitle {
+    font-size: var(--text-sm);
+    color: var(--command-surface-muted);
+    max-width: 60ch;
+}
+
+.command-page__actions,
+.command-page__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.command-page__meta {
+    font-size: var(--text-xs);
+    color: var(--command-surface-muted);
+}
+
+.command-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    grid-gap: var(--space-6);
+    gap: var(--space-6);
+}
+
+.command-layout--balanced {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@media (max-width: 1024px) {
+    .command-layout,
+    .command-layout--balanced {
+        grid-template-columns: 1fr;
+    }
+}
+
+.command-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--command-surface-gap);
+}
+
+.command-stack--loose {
+    gap: var(--space-5);
+}
+
+/* ---------------------------------------------------------
+   9. COMMAND TOOLBAR
+--------------------------------------------------------- */
+
+.command-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--command-surface-border);
+    border: var(--border-width, 1px) solid var(--command-surface-border);
+    border-radius: var(--command-surface-radius);
+    background: var(--command-surface-bg);
+    box-shadow: var(--command-surface-shadow);
+}
+
+.command-toolbar__group,
+.command-toolbar__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.command-toolbar__search {
+    flex: 1 1 14rem;
+    min-width: 12rem;
+}
+
+/* ---------------------------------------------------------
+   10. GRID + VARIANTS
+--------------------------------------------------------- */
+
+.command-grid {
+    display: grid;
+    grid-gap: var(--command-surface-gap);
+    gap: var(--command-surface-gap);
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+}
+
+.command-grid--2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.command-grid--3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.command-grid--4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+@media (max-width: 1024px) {
+    .command-grid--3,
+    .command-grid--4 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 720px) {
+    .command-grid--2,
+    .command-grid--3,
+    .command-grid--4 {
+        grid-template-columns: 1fr;
+    }
+}
+
+:where(.command-card,
+.command-action,
+.command-nudge,
+.command-glance,
+.command-pill,
+.command-step)[data-variant="info"] {
+    --command-variant-rail: var(--semantic-info-border, var(--color-info));
+    --command-variant-tint: var(--semantic-info-bg, var(--color-info-soft));
+    --command-variant-text: var(--semantic-info-text, var(--color-text));
+    --command-variant-muted: var(--semantic-info-text, var(--color-text-muted));
+}
+
+:where(.command-card,
+.command-action,
+.command-nudge,
+.command-glance,
+.command-pill,
+.command-step)[data-variant="success"] {
+    --command-variant-rail: var(--semantic-success-border, var(--color-success));
+    --command-variant-tint: var(--semantic-success-bg, var(--color-success-soft));
+    --command-variant-text: var(--semantic-success-text, var(--color-text));
+    --command-variant-muted: var(--semantic-success-text, var(--color-text-muted));
+}
+
+:where(.command-card,
+.command-action,
+.command-nudge,
+.command-glance,
+.command-pill,
+.command-step)[data-variant="warning"] {
+    --command-variant-rail: var(--semantic-warning-border, var(--color-warning));
+    --command-variant-tint: var(--semantic-warning-bg, var(--color-warning-soft));
+    --command-variant-text: var(--semantic-warning-text, var(--color-text));
+    --command-variant-muted: var(--semantic-warning-text, var(--color-text-muted));
+}
+
+:where(.command-card,
+.command-action,
+.command-nudge,
+.command-glance,
+.command-pill,
+.command-step)[data-variant="danger"] {
+    --command-variant-rail: var(--semantic-danger-border, var(--color-danger));
+    --command-variant-tint: var(--semantic-danger-bg, var(--color-danger-soft));
+    --command-variant-text: var(--semantic-danger-text, var(--color-text));
+    --command-variant-muted: var(--semantic-danger-text, var(--color-text-muted));
+}
+
+:where(.command-card,
+.command-action,
+.command-nudge,
+.command-glance,
+.command-pill,
+.command-step)[data-variant="accent"] {
+    --command-variant-rail: var(--accent-soft-border, var(--color-accent));
+    --command-variant-tint: var(--accent-soft-surface, var(--color-accent-soft));
+    --command-variant-text: var(--accent-soft-on, var(--color-on-accent));
+    --command-variant-muted: var(--accent-soft-on, var(--color-on-accent));
+}
+
+:where(.command-card,
+.command-action,
+.command-nudge,
+.command-glance,
+.command-pill,
+.command-step)[data-variant="neutral"] {
+    --command-variant-rail: var(--color-border-strong);
+    --command-variant-tint: var(--color-surface-subtle);
+    --command-variant-text: var(--color-text);
+    --command-variant-muted: var(--color-text-muted);
+}
+
+/* ---------------------------------------------------------
+   11. CARD + SURFACE
+--------------------------------------------------------- */
+
+.command-card {
+    --command-variant-rail: var(--command-accent);
+    --command-variant-tint: var(--command-accent-soft);
+    --command-variant-text: var(--command-surface-title);
+    --command-variant-muted: var(--command-surface-muted);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--command-surface-pad);
+    border-radius: var(--command-surface-radius);
+    border: 1px solid var(--command-surface-border);
+    border: var(--border-width, 1px) solid var(--command-surface-border);
+    background: var(--command-surface-bg);
+    box-shadow: var(--command-surface-shadow);
+    color: var(--command-variant-text);
+}
+
+.command-card--rail {
+    border-left: var(--command-rail-width) solid var(--command-variant-rail);
+}
+
+.command-card--tint {
+    background: var(--command-variant-tint);
+}
+
+.command-card--flat {
+    box-shadow: none;
+}
+
+.command-card__kicker {
+    font-size: var(--text-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--command-variant-muted);
+}
+
+.command-card__title {
+    font-size: var(--text-md);
+    font-weight: 600;
+    font-weight: var(--font-weight-semibold, 600);
+}
+
+.command-card__subtitle {
+    font-size: var(--text-sm);
+    color: var(--command-variant-muted);
+}
+
+.command-card__meta,
+.command-card__footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--command-variant-muted);
+}
+
+/* ---------------------------------------------------------
+   12. PILLS / TAGS
+--------------------------------------------------------- */
+
+.command-pill {
+    --command-variant-rail: var(--command-pill-border);
+    --command-variant-tint: var(--command-pill-bg);
+    --command-variant-text: var(--command-pill-text);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: 0 var(--space-2);
+    border-radius: var(--radius-pill);
+    border: 1px solid var(--command-variant-rail);
+    border: var(--border-width, 1px) solid var(--command-variant-rail);
+    background: var(--command-variant-tint);
+    color: var(--command-variant-text);
+    font-size: var(--text-xxs);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    white-space: nowrap;
+}
+
+/* ---------------------------------------------------------
+   13. ACTIONS (Tiles + Rows)
+--------------------------------------------------------- */
+
+.command-action {
+    --command-variant-rail: var(--command-accent);
+    --command-variant-tint: var(--command-accent-soft);
+    --command-variant-text: var(--command-surface-title);
+    --command-variant-muted: var(--command-surface-muted);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--command-surface-pad);
+    border-radius: var(--command-surface-radius);
+    border: 1px solid var(--command-surface-border);
+    border: var(--border-width, 1px) solid var(--command-surface-border);
+    background: var(--command-surface-bg);
+    box-shadow: var(--shadow-xs);
+    color: var(--command-variant-text);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+
+    transition: transform 120ms ease-out, box-shadow 120ms ease-out, border-color 120ms ease-out, background-color 120ms ease-out;
+
+    transition: transform var(--transition-fast, 120ms ease-out), box-shadow var(--transition-fast, 120ms ease-out), border-color var(--transition-fast, 120ms ease-out), background-color var(--transition-fast, 120ms ease-out);
+}
+
+.command-action:hover {
+    background: var(--command-variant-tint);
+    border-color: var(--command-variant-rail);
+    transform: translateY(-1px);
+}
+
+.command-action--primary {
+    padding: var(--space-5);
+    grid-column: span 2;
+}
+
+.command-action--row {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+}
+
+.command-action--row .command-action__content {
+    flex: 1;
+}
+
+.command-action--row .command-action__meta {
+    margin-left: auto;
+}
+
+@media (max-width: 720px) {
+    .command-action--primary {
+        grid-column: span 1;
+    }
+}
+
+.command-action__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    width: var(--icon-md, 1.25rem);
+    height: 1.25rem;
+    height: var(--icon-md, 1.25rem);
+    color: var(--command-variant-rail);
+}
+
+.command-action__icon svg,
+.command-action__icon .icon {
+    width: 100%;
+    height: 100%;
+}
+
+.command-action__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+}
+
+.command-action__title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    font-weight: var(--font-weight-semibold, 600);
+}
+
+.command-action__desc {
+    font-size: var(--text-xs);
+    color: var(--command-variant-muted);
+}
+
+.command-action__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--command-variant-muted);
+}
+
+/* ---------------------------------------------------------
+   14. NEXT STEPS
+--------------------------------------------------------- */
+
+.command-steps {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-gap: var(--space-2);
+    gap: var(--space-2);
+}
+
+.command-step {
+    --command-variant-rail: var(--command-accent);
+    --command-variant-tint: var(--command-accent-soft);
+    --command-variant-text: var(--command-surface-title);
+    --command-variant-muted: var(--command-surface-muted);
+
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-gap: var(--space-3);
+    gap: var(--space-3);
+    align-items: start;
+    padding: var(--space-3);
+    border-radius: var(--command-surface-radius);
+    border: 1px solid var(--command-surface-border);
+    border: var(--border-width, 1px) solid var(--command-surface-border);
+    background: var(--command-surface-bg);
+}
+
+.command-step__index {
+    width: var(--space-6);
+    height: var(--space-6);
+    border-radius: 999px;
+    background: var(--command-variant-tint);
+    color: var(--command-variant-text);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    font-weight: var(--font-weight-semibold, 600);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.command-step__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+}
+
+.command-step__title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    font-weight: var(--font-weight-semibold, 600);
+}
+
+.command-step__desc {
+    font-size: var(--text-xs);
+    color: var(--command-variant-muted);
+}
+
+.command-step__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--command-variant-muted);
+}
+
+.command-step__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.command-step--done {
+    opacity: 0.7;
+}
+
+/* ---------------------------------------------------------
+   15. QUEUE + LANES
+--------------------------------------------------------- */
+
+.command-lanes {
+    display: grid;
+    grid-gap: var(--space-3);
+    gap: var(--space-3);
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+}
+
+.command-lane {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    border-radius: var(--command-surface-radius);
+    border: 1px solid var(--command-surface-border);
+    border: var(--border-width, 1px) solid var(--command-surface-border);
+    background: var(--command-surface-bg);
+}
+
+.command-lane__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+}
+
+.command-lane__title {
+    font-size: var(--text-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--command-surface-muted);
+}
+
+.command-lane__count {
+    font-size: var(--text-xs);
+    color: var(--command-surface-muted);
+}
+
+.command-queue {
+    display: grid;
+    grid-gap: var(--space-2);
+    gap: var(--space-2);
+}
+
+.command-queue__item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-gap: var(--space-3);
+    gap: var(--space-3);
+    align-items: center;
+    padding: var(--space-3);
+    border-radius: var(--command-surface-radius);
+    border: 1px solid var(--command-surface-border);
+    border: var(--border-width, 1px) solid var(--command-surface-border);
+    background: var(--command-surface-bg);
+}
+
+.command-queue__status {
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 999px;
+    background: var(--color-info);
+}
+
+.command-queue__status--success {
+    background: var(--color-success);
+}
+
+.command-queue__status--warning {
+    background: var(--color-warning);
+}
+
+.command-queue__status--danger {
+    background: var(--color-danger);
+}
+
+.command-queue__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+}
+
+.command-queue__title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    font-weight: var(--font-weight-semibold, 600);
+}
+
+.command-queue__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--command-surface-muted);
+}
+
+.command-queue__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.command-progress {
+    height: 0.35rem;
+    border-radius: 999px;
+    background: var(--command-progress-track);
+    overflow: hidden;
+}
+
+.command-progress__bar {
+    height: 100%;
+    width: 0;
+    background: var(--command-progress-fill);
+    transition: width 180ms ease-out;
+    transition: width var(--transition-normal, 180ms ease-out);
+}
+
+.command-progress--success {
+    --command-progress-fill: var(--color-success);
+}
+
+.command-progress--warning {
+    --command-progress-fill: var(--color-warning);
+}
+
+.command-progress--danger {
+    --command-progress-fill: var(--color-danger);
+}
+
+/* ---------------------------------------------------------
+   16. GLANCE METRICS
+--------------------------------------------------------- */
+
+.command-glance-grid {
+    display: grid;
+    grid-gap: var(--space-3);
+    gap: var(--space-3);
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+}
+
+.command-glance {
+    --command-variant-rail: var(--command-accent);
+    --command-variant-tint: var(--command-accent-soft);
+    --command-variant-text: var(--command-surface-title);
+    --command-variant-muted: var(--command-surface-muted);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-3);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--command-surface-border);
+    border: var(--border-width, 1px) solid var(--command-surface-border);
+    background: var(--command-surface-bg);
+    color: var(--command-variant-text);
+}
+
+.command-glance--tint {
+    background: var(--command-variant-tint);
+    border-color: var(--command-variant-rail);
+}
+
+.command-glance__value {
+    font-size: var(--text-lg);
+    font-weight: 600;
+    font-weight: var(--font-weight-semibold, 600);
+}
+
+.command-glance__label {
+    font-size: var(--text-xxs);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--command-variant-muted);
+}
+
+.command-glance__meta {
+    font-size: var(--text-xs);
+    color: var(--command-variant-muted);
+}
+
+/* ---------------------------------------------------------
+   17. NUDGES
+--------------------------------------------------------- */
+
+.command-nudge {
+    --command-variant-rail: var(--command-accent);
+    --command-variant-tint: var(--command-accent-soft);
+    --command-variant-text: var(--command-surface-title);
+    --command-variant-muted: var(--command-surface-muted);
+
+    display: flex;
+    gap: var(--space-3);
+    align-items: flex-start;
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--command-surface-radius);
+    border: 1px solid var(--command-surface-border);
+    border: var(--border-width, 1px) solid var(--command-surface-border);
+    background: var(--command-surface-bg);
+    color: var(--command-variant-text);
+}
+
+.command-nudge--tint {
+    background: var(--command-variant-tint);
+    border-color: var(--command-variant-rail);
+}
+
+.command-nudge__icon {
+    width: 1.25rem;
+    width: var(--icon-md, 1.25rem);
+    height: 1.25rem;
+    height: var(--icon-md, 1.25rem);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--command-variant-rail);
+    flex-shrink: 0;
+}
+
+.command-nudge__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+.command-nudge__title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    font-weight: var(--font-weight-semibold, 600);
+}
+
+.command-nudge__text {
+    font-size: var(--text-xs);
+    color: var(--command-variant-muted);
+}
+
+.command-nudge__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+}
+
+/* ---------------------------------------------------------
+   18. ACTIVITY STREAM
+--------------------------------------------------------- */
+
+.command-activity {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-gap: var(--space-2);
+    gap: var(--space-2);
+}
+
+.command-activity__item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-gap: var(--space-3);
+    gap: var(--space-3);
+    align-items: start;
+    padding-bottom: var(--space-2);
+    border-bottom: 1px solid var(--command-surface-border);
+    border-bottom: var(--border-width, 1px) solid var(--command-surface-border);
+}
+
+.command-activity__item:last-child {
+    border-bottom: 0;
+    padding-bottom: 0;
+}
+
+.command-activity__time {
+    font-size: var(--text-xs);
+    color: var(--command-surface-muted);
+    white-space: nowrap;
+}
+
+.command-activity__title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    font-weight: var(--font-weight-semibold, 600);
+}
+
+.command-activity__meta {
+    font-size: var(--text-xs);
+    color: var(--command-surface-muted);
+}
+
+/* ---------------------------------------------------------
+   19. EMPTY STATE
+--------------------------------------------------------- */
+
+.command-empty {
+    padding: var(--space-6);
+    border-radius: var(--command-surface-radius);
+    border: 1px dashed var(--command-surface-border);
+    border: var(--border-width, 1px) dashed var(--command-surface-border);
+    text-align: center;
+    color: var(--command-surface-muted);
+}
+
+.command-empty__title {
+    font-size: var(--text-md);
+    font-weight: 600;
+    font-weight: var(--font-weight-semibold, 600);
+    color: var(--command-surface-title);
+}
+
+.command-empty__body {
+    font-size: var(--text-sm);
+    margin-top: var(--space-1);
+}
+
+.command-empty__actions {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    margin-top: var(--space-3);
+}
+
+/* ---------------------------------------------------------
+   20. REDUCED MOTION SAFETY (optional extra)
 --------------------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
     .command,
     .command::before,
     .command__panel,
-    .command__item {
+    .command__item,
+    .command-action,
+    .command-progress__bar {
         transition: none !important;
     }
 }