@crewlethq/ui 0.2.0

package/dist/CodeBlock-IEMBNIQC.css

@@ -0,0 +1,90 @@
+/*
+ * CodeBlock, a monospace command/config surface. Slightly lifted from the
+ * page background, with an optional header for filename and a copy control.
+ * Content scrolls sideways so long lines never reflow.
+ */
+
+.crewlet-codeblock {
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-subtle);
+  overflow: hidden;
+  font-family: var(--font-family-mono);
+}
+
+.crewlet-codeblock__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+  padding: var(--spacing-3) var(--spacing-4);
+  border-bottom: 1px solid var(--color-border-default);
+  background: var(--color-surface-muted);
+}
+
+.crewlet-codeblock__meta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-codeblock__filename {
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.crewlet-codeblock__lang {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.crewlet-codeblock__pre {
+  margin: 0;
+  padding: var(--spacing-4);
+  overflow-x: auto;
+  font-size: var(--font-size-sm);
+  line-height: 1.7;
+  color: var(--color-text-primary);
+}
+
+.crewlet-codeblock__code {
+  display: block;
+  font-family: inherit;
+}
+
+.crewlet-codeblock__line {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-3);
+  white-space: pre;
+}
+
+.crewlet-codeblock__ln {
+  flex-shrink: 0;
+  width: 1.5em;
+  text-align: right;
+  color: var(--color-text-muted);
+  user-select: none;
+}
+
+.crewlet-codeblock__prompt {
+  flex-shrink: 0;
+  color: var(--color-brand-accent);
+  user-select: none;
+}
+
+.crewlet-codeblock__linecontent {
+  white-space: pre;
+}
+
+/* The copy control is a Copyable configured to show a compact "Copy" label. */
+.crewlet-codeblock__copy {
+  flex-shrink: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+}

package/dist/Container-LTKBA2FW.css

@@ -0,0 +1,21 @@
+/*
+ * Container, the centered content measure. One max-width scale shared by
+ * every surface so pages line up regardless of who composed them.
+ */
+
+.crewlet-container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: var(--spacing-6);
+}
+
+.crewlet-container--sm { max-width: 720px; }
+.crewlet-container--md { max-width: 960px; }
+.crewlet-container--lg { max-width: 1200px; }
+.crewlet-container--xl { max-width: 1440px; }
+
+@media (max-width: 640px) {
+  .crewlet-container {
+    padding-inline: var(--spacing-5);
+  }
+}

package/dist/Copyable-IB57OTHZ.css

@@ -0,0 +1,123 @@
+/*
+ * Copyable, identifier / value display with click-to-copy and a
+ * hover-revealed copy button. Three variants:
+ *
+ *   chip    Compact pill for table cells. firstN…lastM truncation.
+ *           Background chip, copy button reveals on hover.
+ *   inline  Full value inline for detail pages, no chip background,
+ *           copy button reveals on hover.
+ *   block   Bordered panel for code samples or full URLs. Copy
+ *           button is always visible.
+ */
+
+.crewlet-copyable {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+.crewlet-copyable__value {
+  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  letter-spacing: 0.02em;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.crewlet-copyable:hover .crewlet-copyable__value {
+  color: var(--color-text-primary);
+}
+
+.crewlet-copyable__button {
+  flex-shrink: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+}
+
+.crewlet-copyable__button .material-symbols-outlined {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.crewlet-copyable:hover .crewlet-copyable__button,
+.crewlet-copyable__button:focus-visible,
+.crewlet-copyable.is-copied .crewlet-copyable__button {
+  opacity: 1;
+}
+
+.crewlet-copyable__button:hover {
+  background: var(--color-brand-accent-soft, rgba(84, 105, 212, 0.1));
+  border-color: var(--color-brand-accent-soft-strong, rgba(84, 105, 212, 0.32));
+  color: var(--color-brand-accent, var(--color-brand-primary));
+}
+
+.crewlet-copyable.is-copied .crewlet-copyable__button {
+  color: var(--color-brand-accent, var(--color-brand-primary));
+}
+
+/* ── chip ───────────────────────────────────────────────────────── */
+.crewlet-copyable--chip .crewlet-copyable__value {
+  font-size: 11.5px;
+  background: var(--color-surface-elevated, var(--color-surface-subtle));
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+/* ── inline ─────────────────────────────────────────────────────── */
+.crewlet-copyable--inline .crewlet-copyable__value {
+  font-size: 12px;
+  background: transparent;
+  padding: 0;
+  color: var(--color-text-secondary);
+}
+
+/* ── block ──────────────────────────────────────────────────────── */
+.crewlet-copyable--block {
+  display: inline-flex;
+  background: var(--color-surface-elevated, var(--color-surface-subtle));
+  border: 1px solid var(--color-border-default);
+  border-radius: 6px;
+  padding: 8px 12px;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.crewlet-copyable--block .crewlet-copyable__value {
+  font-size: 13px;
+  color: var(--color-text-primary);
+  background: transparent;
+  padding: 0;
+  white-space: nowrap;
+  overflow-x: auto;
+  flex: 1;
+}
+
+.crewlet-copyable--block .crewlet-copyable__button {
+  opacity: 1;
+}
+
+/* monospace flag: forces mono font for any variant (commonly paired
+   with block to render command samples). */
+.crewlet-copyable--monospace .crewlet-copyable__value {
+  font-family: var(--font-family-mono);
+}