a3s-flow 1.1.0

Durable workflow engine and Rust SDK for A3S
Documentation
.a3s-form-workflow-code-editor.code-editor {
  --code-editor-font-size: 11px;
  --code-editor-gutter-width: 38px;
  --code-editor-line-height: 1.55;
  --code-editor-min-height: 112px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--a3s-form-line-strong, #d3d6dc);
  border-radius: 9px;
  background: var(--a3s-form-panel, #fff);
  color: var(--a3s-form-ink, #17181a);
  box-shadow: none;
  font-family: var(--font-mono, "SFMono-Regular", Consolas, monospace);
}

.a3s-form-workflow-code-editor.code-editor[data-size="lg"] {
  --code-editor-min-height: min(56vh, 520px);
}

.a3s-form-workflow-code-editor.code-editor > header,
.a3s-form-workflow-code-editor.code-editor > footer {
  min-width: 0;
  padding-inline: 9px;
  border-color: var(--a3s-form-line, #e2e4e8);
  background: var(--a3s-form-panel-soft, #f2f3f5);
  color: var(--a3s-form-muted, #62666e);
}

.a3s-form-workflow-code-editor.code-editor > header {
  min-height: 36px;
}

.a3s-form-workflow-code-editor.code-editor > footer {
  min-height: 28px;
  font-family: var(--a3s-ui-font, ui-sans-serif, sans-serif);
  font-size: 9px;
}

.a3s-form-workflow-code-editor [data-code-editor-file],
.a3s-form-workflow-code-editor [data-code-editor-actions],
.a3s-form-workflow-code-editor [data-code-editor-info],
.a3s-form-workflow-code-editor [data-code-editor-meta] {
  min-width: 0;
  gap: 7px;
}

.a3s-form-workflow-code-editor [data-code-editor-file] {
  overflow: hidden;
  font-family: var(--a3s-ui-font, ui-sans-serif, sans-serif);
  font-size: 10px;
}

.a3s-form-workflow-code-editor [data-code-editor-file] strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a3s-form-workflow-code-editor [data-code-editor-language] {
  color: var(--a3s-form-faint, #8a8f98);
  font-family: var(--font-mono, "SFMono-Regular", Consolas, monospace);
  font-size: 9px;
  font-weight: 680;
}

.a3s-form-workflow-code-editor [data-code-editor-actions] button {
  min-height: 28px;
  padding-inline: 8px;
  border: 1px solid var(--a3s-form-line-strong, #d3d6dc);
  border-radius: 6px;
  background: var(--a3s-form-panel, #fff);
  color: var(--a3s-form-blue, #2864e8);
  font-family: var(--a3s-ui-font, ui-sans-serif, sans-serif);
  font-size: 10px;
  font-weight: 650;
}

.a3s-form-workflow-code-editor.code-editor > section {
  min-width: 0;
  min-height: var(--code-editor-min-height);
  background: var(--a3s-form-panel, #fff);
}

.a3s-form-workflow-code-editor [data-code-editor-gutter] {
  padding-block: 10px;
  border-right: 1px solid var(--a3s-form-line, #e2e4e8);
  background: color-mix(
    in srgb,
    var(--a3s-form-panel-soft, #f2f3f5) 58%,
    var(--a3s-form-panel, #fff)
  );
  color: var(--a3s-form-faint, #8a8f98);
}

.a3s-form-workflow-code-editor [data-code-editor-gutter] > span {
  padding-inline: 8px;
  font-variant-numeric: tabular-nums;
}

.a3s-form-field
  .a3s-form-workflow-code-editor.code-editor
  > section
  > textarea,
.a3s-form-flow-child-input
  .a3s-form-workflow-code-editor.code-editor
  > section
  > textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--code-editor-min-height);
  padding: 10px 12px;
  resize: vertical;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: var(--a3s-form-panel, #fff);
  color: var(--a3s-form-ink, #17181a);
  box-shadow: none;
  font-family: inherit;
  font-size: var(--code-editor-font-size);
  line-height: var(--code-editor-line-height);
  tab-size: 2;
  white-space: pre;
}

.a3s-form-workflow-code-editor.code-editor[data-validation-state="invalid"] {
  border-color: var(--a3s-form-red, #c83f45);
}

.a3s-form-workflow-code-editor.code-editor[data-disabled="true"] {
  opacity: 0.72;
}

.a3s-form-workflow-data-display-control
  .a3s-form-workflow-code-editor.code-editor {
  --code-editor-min-height: 96px;
}

.a3s-form-workflow-prompt-editor .a3s-flow-variable-textarea > textarea {
  width: 100%;
  height: 150px;
  min-height: 112px;
  max-height: 260px;
  resize: vertical;
  field-sizing: fixed;
}

.a3s-form-workflow-prompt-editor[data-expanded="true"]
  .a3s-flow-variable-textarea
  > textarea {
  height: min(56vh, 520px);
  max-height: 520px;
}

.a3s-form-flow-child-input > .a3s-form-workflow-code-editor {
  margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .a3s-form-workflow-code-editor * {
    scroll-behavior: auto;
  }
}